ux: Fade in inventory tab on first load (#2127)

NigelBreslaw · Jul 23, 2024 · c4221af · c4221af
1 parent 223cd78
commit c4221af
Showing 1 changed file with 20 additions and 18 deletions.
diff --git a/native/app/inventory/pages/InventoryPage.tsx b/native/app/inventory/pages/InventoryPage.tsx
@@ -4,10 +4,18 @@ import { useEffect, useRef, useState } from "react";
 import { RefreshControl, ScrollView, StyleSheet, View, useWindowDimensions } from "react-native";
 
 import { getFullProfile } from "@/app/bungie/BungieApi.ts";
-import { InventoryPageEnums, type UISections } from "@/app/inventory/logic/Helpers.ts";
+import type { InventoryPageEnums, UISections } from "@/app/inventory/logic/Helpers.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { debounce } from "@/app/utilities/Helpers.ts";
 import { UiCellRenderItem } from "@/app/inventory/UiRowRenderItem.tsx";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
 
 function calcCurrentListIndex(posX: number, PAGE_WIDTH: number) {
   const internalOffset = posX - PAGE_WIDTH / 2;
@@ -26,14 +34,6 @@ type Props = {
   readonly pageEstimatedFlashListItemSize: number[];
 };
 
-const rootStyles = StyleSheet.create({
-  root: {
-    flex: 1,
-    width: "100%",
-    height: "100%",
-  },
-});
-
 const keyExtractor = (item: UISections) => item.id;
 const getItemType = (item: UISections) => item.type;
 
@@ -48,6 +48,10 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
   const pageData = useGGStore((state) => state.getPageData(inventoryPageEnum));
   const pullRefreshing = useGGStore((state) => state.pullRefreshing);
   const [pageReady, setPageReady] = useState(false);
+  const opacity = useSharedValue(0);
+  const transferButtonStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(opacity.value, [0, 1], [0, 1], Extrapolation.CLAMP),
+  }));
 
   const jumpToCharacterRef = useRef<() => void>(() => {
     const currentListIndex = useGGStore.getState().currentListIndex;
@@ -100,12 +104,6 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
     return unsubscribe;
   }, []);
 
-  useEffect(() => {
-    if (pageReady) {
-      jumpToCharacterRef.current();
-    }
-  }, [pageReady]);
-
   useFocusEffect(() => {
     if (pageReady) {
       jumpToCharacterRef.current();
@@ -117,9 +115,8 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
 
   const debouncedMove = debounce(listMovedRef.current, 40);
   const debounceListIndex = debounce(calcCurrentListIndex, 40);
-  console.log("render", InventoryPageEnums[inventoryPageEnum]);
   return (
-    <View style={[rootStyles.root, { opacity: pageReady ? 1 : 0 }]}>
+    <Animated.View style={[transferButtonStyle, { flex: 1, width: "100%", height: "100%" }]}>
       <ScrollView
         horizontal
         pagingEnabled
@@ -149,6 +146,11 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
                 onLoad={() => {
                   if (index === pageData.length - 1) {
                     setPageReady(true);
+                    jumpToCharacterRef.current();
+                    opacity.value = withSpring(1, {
+                      duration: 1000,
+                      reduceMotion: ReduceMotion.System,
+                    });
                   }
                 }}
                 data={pageData[index]}
@@ -166,6 +168,6 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
           );
         })}
       </ScrollView>
-    </View>
+    </Animated.View>
   );
 }