From a8fef13aa89520190cf4bc79d72865dd951ea749 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Thu, 15 Aug 2024 10:38:17 +0200
Subject: [PATCH] fix: cls issues

content layout shift
---
 components/ItemCardText.tsx             | 12 ++++----
 components/common/HorrizontalScroll.tsx | 39 +++++++++++++++++++++----
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/components/ItemCardText.tsx b/components/ItemCardText.tsx
index 3096a907..98aa9e42 100644
--- a/components/ItemCardText.tsx
+++ b/components/ItemCardText.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "./common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
 
 type ItemCardProps = {
   item: BaseItemDto;
@@ -20,14 +21,13 @@ function seasonNameToIndex(seasonName: string | null | undefined) {
 
 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
   return (
-    <View className="mt-2 flex flex-col grow-0">
+    <View className="mt-2 flex flex-col h-12">
       {item.Type === "Episode" ? (
         <>
-          <Text className="">{item.SeriesName}</Text>
-          <Text
-            style={{ flexWrap: "wrap" }}
-            className="flex text-xs opacity-50 break-all"
-          >
+          <Text numberOfLines={2} className="">
+            {item.SeriesName}
+          </Text>
+          <Text numberOfLines={1} className="text-xs opacity-50">
             {`S${seasonNameToIndex(
               item?.SeasonName,
             )}:E${item.IndexNumber?.toString()}`}{" "}
diff --git a/components/common/HorrizontalScroll.tsx b/components/common/HorrizontalScroll.tsx
index 25f6c30b..97192be6 100644
--- a/components/common/HorrizontalScroll.tsx
+++ b/components/common/HorrizontalScroll.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   ScrollView,
   View,
@@ -6,6 +6,11 @@ import {
   ActivityIndicator,
   ScrollViewProps,
 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 
 interface HorizontalScrollProps<T> extends ScrollViewProps {
   data?: T[] | null;
@@ -13,6 +18,7 @@ interface HorizontalScrollProps<T> extends ScrollViewProps {
   containerStyle?: ViewStyle;
   contentContainerStyle?: ViewStyle;
   loadingContainerStyle?: ViewStyle;
+  height?: number;
 }
 
 export function HorizontalScroll<T>({
@@ -21,13 +27,19 @@ export function HorizontalScroll<T>({
   containerStyle,
   contentContainerStyle,
   loadingContainerStyle,
+  height = 164,
   ...props
 }: HorizontalScrollProps<T>): React.ReactElement {
   if (!data) {
     return (
       <View
         style={[
-          { flex: 1, justifyContent: "center", alignItems: "center" },
+          {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            height,
+          },
           loadingContainerStyle,
         ]}
       >
@@ -36,6 +48,18 @@ export function HorizontalScroll<T>({
     );
   }
 
+  const opacity = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(opacity.value, { duration: 250 }),
+    };
+  });
+
+  useEffect(() => {
+    if (data && data.length > 0) opacity.value = 1;
+  }, [data]);
+
   return (
     <ScrollView
       horizontal
@@ -44,13 +68,18 @@ export function HorizontalScroll<T>({
       showsHorizontalScrollIndicator={false}
       {...props}
     >
-      <View className="flex flex-row px-4">
-        {data.map((item, index) => (
+      <Animated.View
+        className={`
+        flex flex-row px-4
+      `}
+        style={[animatedStyle]}
+      >
+        {data?.map((item, index) => (
           <View className="mr-2" key={index}>
             <React.Fragment>{renderItem(item, index)}</React.Fragment>
           </View>
         ))}
-      </View>
+      </Animated.View>
     </ScrollView>
   );
 }