From 90ef8ef6f9b7cc7f6b66e502b1c1792b602599b9 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Mon, 6 Jan 2025 17:38:59 +0100
Subject: [PATCH] feat: fade in images

---
 components/posters/JellyseerrPoster.tsx | 53 +++++++++++++++++++------
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/components/posters/JellyseerrPoster.tsx b/components/posters/JellyseerrPoster.tsx
index 5f363d42..930712e5 100644
--- a/components/posters/JellyseerrPoster.tsx
+++ b/components/posters/JellyseerrPoster.tsx
@@ -1,7 +1,7 @@
 import { View, ViewProps } from "react-native";
 import { Image } from "expo-image";
 import { Text } from "@/components/common/Text";
-import { useMemo } from "react";
+import { useMemo, useRef, useState } from "react";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import {
   MediaStatus,
@@ -16,21 +16,46 @@ import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRou
 import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import Animated, {
+  FadeIn,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+
 interface Props extends ViewProps {
   item: MovieResult | TvResult;
 }
 
 const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
   const { jellyseerrApi } = useJellyseerr();
+  const loadingOpacity = useSharedValue(1);
+  const imageOpacity = useSharedValue(0);
+
+  const loadingAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: loadingOpacity.value,
+  }));
+
+  const imageAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: imageOpacity.value,
+  }));
+
+  const handleImageLoad = () => {
+    loadingOpacity.value = withTiming(0, { duration: 200 });
+    imageOpacity.value = withTiming(1, { duration: 300 });
+  };
 
   const imageSrc = useMemo(
     () => jellyseerrApi?.imageProxy(item.posterPath, "w300_and_h450_face"),
     [item, jellyseerrApi]
   );
+
   const title = useMemo(
     () => (item.mediaType === MediaType.MOVIE ? item.title : item.name),
     [item]
   );
+
   const releaseYear = useMemo(
     () =>
       new Date(
@@ -53,23 +78,25 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
     >
       <View className="flex flex-col w-28 mr-2">
         <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
-          <Image
-            key={item.id}
-            id={item.id.toString()}
-            source={{ uri: imageSrc }}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            style={{
-              aspectRatio: "10/15",
-              width: "100%",
-            }}
-          />
+          <Animated.View style={imageAnimatedStyle}>
+            <Image
+              key={item.id}
+              id={item.id.toString()}
+              source={{ uri: imageSrc }}
+              cachePolicy={"memory-disk"}
+              contentFit="cover"
+              style={{
+                aspectRatio: "10/15",
+                width: "100%",
+              }}
+              onLoad={handleImageLoad}
+            />
+          </Animated.View>
           <JellyseerrStatusIcon
             className="absolute bottom-1 right-1"
             showRequestIcon={canRequest}
             mediaStatus={item?.mediaInfo?.status}
           />
-
           <JellyseerrMediaIcon
             className="absolute top-1 left-1"
             mediaType={item?.mediaType}