From 2c9906377dd1e654618085915d3851bfa9a363ea Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 25 Jan 2026 21:31:37 +0100
Subject: [PATCH] feat(tv): update skeleton layout to match swapped poster
 position

---
 components/ItemContentSkeleton.tv.tsx | 49 ++++++++++++++-------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/ItemContentSkeleton.tv.tsx b/components/ItemContentSkeleton.tv.tsx
index 6b106937..e8186434 100644
--- a/components/ItemContentSkeleton.tv.tsx
+++ b/components/ItemContentSkeleton.tv.tsx
@@ -1,41 +1,28 @@
 import React from "react";
 import { Dimensions, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("window");
 
 export const ItemContentSkeletonTV: React.FC = () => {
+  const insets = useSafeAreaInsets();
+
   return (
     <View
       style={{
         flex: 1,
         flexDirection: "row",
-        paddingTop: 180,
-        paddingHorizontal: 160,
+        paddingTop: insets.top + 140,
+        paddingHorizontal: insets.left + 80,
       }}
     >
-      {/* Left side - Poster placeholder */}
-      <View
-        style={{
-          width: SCREEN_WIDTH * 0.22,
-          marginRight: 50,
-        }}
-      >
+      {/* Left side - Content placeholders */}
+      <View style={{ flex: 1 }}>
+        {/* Logo placeholder */}
         <View
           style={{
-            aspectRatio: 2 / 3,
-            borderRadius: 16,
-            backgroundColor: "#1a1a1a",
-          }}
-        />
-      </View>
-
-      {/* Right side - Content placeholders */}
-      <View style={{ flex: 1, justifyContent: "center" }}>
-        {/* Logo/Title placeholder */}
-        <View
-          style={{
-            height: 80,
-            width: "60%",
+            height: 150,
+            width: "80%",
             backgroundColor: "#1a1a1a",
             borderRadius: 8,
             marginBottom: 24,
@@ -155,6 +142,22 @@ export const ItemContentSkeletonTV: React.FC = () => {
           }}
         />
       </View>
+
+      {/* Right side - Poster placeholder */}
+      <View
+        style={{
+          width: SCREEN_WIDTH * 0.22,
+          marginLeft: 50,
+        }}
+      >
+        <View
+          style={{
+            aspectRatio: 2 / 3,
+            borderRadius: 16,
+            backgroundColor: "#1a1a1a",
+          }}
+        />
+      </View>
     </View>
   );
 };