fix: jellyseer categories (#1233)

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com>

components/jellyseerr/GridSkeleton.tsx

@@ -0,0 +1,21 @@
+import { View } from "react-native";
+
+interface Props {
+  index: number;
+}
+// Dev note might be a good idea to standardize skeletons across the app and have one "file" for it.
+export const GridSkeleton: React.FC<Props> = ({ index }) => {
+  return (
+    <View
+      key={index}
+      className='flex flex-col mr-2 h-auto'
+      style={{ width: "30.5%" }}
+    >
+      <View className='relative rounded-lg overflow-hidden border border-neutral-900 w-full mt-4 aspect-[10/15] bg-neutral-800' />
+      <View className='mt-2 flex flex-col w-full'>
+        <View className='h-4 bg-neutral-800 rounded mb-1' />
+        <View className='h-3 bg-neutral-800 rounded w-1/2' />
+      </View>
+    </View>
+  );
+};

components/jellyseerr/ParallaxSlideShow.tsx

@@ -11,6 +11,7 @@ import { Animated, View, type ViewProps } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { GridSkeleton } from "./GridSkeleton";
 
 const ANIMATION_ENTER = 250;
 const ANIMATION_EXIT = 250;
@@ -28,6 +29,7 @@ interface Props<T> {
   renderItem: (item: T, index: number) => Render;
   keyExtractor: (item: T) => string;
   onEndReached?: (() => void) | null | undefined;
+  isLoading?: boolean;
 }
 
 const ParallaxSlideShow = <T,>({
@@ -40,6 +42,7 @@ const ParallaxSlideShow = <T,>({
   renderItem,
   keyExtractor,
   onEndReached,
+  isLoading = false,
 }: PropsWithChildren<Props<T> & ViewProps>) => {
   const insets = useSafeAreaInsets();
 
@@ -124,27 +127,40 @@ const ParallaxSlideShow = <T,>({
           </View>
           {MainContent?.()}
           <View>
-            <FlashList
-              data={data}
-              ListEmptyComponent={
-                <View className='flex flex-col items-center justify-center h-full'>
-                  <Text className='font-bold text-xl text-neutral-500'>
-                    No results
-                  </Text>
-                </View>
-              }
-              contentInsetAdjustmentBehavior='automatic'
-              ListHeaderComponent={
+            {isLoading ? (
+              <View>
                 <Text className='text-lg font-bold my-2'>{listHeader}</Text>
-              }
-              nestedScrollEnabled
-              showsVerticalScrollIndicator={false}
-              //@ts-expect-error
-              renderItem={({ item, index }) => renderItem(item, index)}
-              keyExtractor={keyExtractor}
-              numColumns={3}
-              ItemSeparatorComponent={() => <View className='h-2 w-2' />}
-            />
+                <View className='px-4'>
+                  <View className='flex flex-row flex-wrap'>
+                    {Array.from({ length: 9 }, (_, i) => (
+                      <GridSkeleton key={i} index={i} />
+                    ))}
+                  </View>
+                </View>
+              </View>
+            ) : (
+              <FlashList
+                data={data}
+                ListEmptyComponent={
+                  <View className='flex flex-col items-center justify-center h-full'>
+                    <Text className='font-bold text-xl text-neutral-500'>
+                      No results
+                    </Text>
+                  </View>
+                }
+                contentInsetAdjustmentBehavior='automatic'
+                ListHeaderComponent={
+                  <Text className='text-lg font-bold my-2'>{listHeader}</Text>
+                }
+                nestedScrollEnabled
+                showsVerticalScrollIndicator={false}
+                //@ts-expect-error
+                renderItem={({ item, index }) => renderItem(item, index)}
+                keyExtractor={keyExtractor}
+                numColumns={3}
+                ItemSeparatorComponent={() => <View className='h-2 w-2' />}
+              />
+            )}
           </View>
         </View>
       </ParallaxScrollView>