Merge pull request #9 from milad-alizadeh/bug-fix-bottom-sheet-loadin…

…g-indicator Bug fix bottom sheet loading indicator
milad-alizadeh · Dec 19, 2023 · 5af148c · 5af148c
2 parents 034e073 + a626cc2
commit 5af148c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 28 deletions.
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
@@ -45,7 +45,6 @@ export const BottomSheet = forwardRef(function BottomSheet(
   const topInset = useSafeAreaInsets().top
   const windowHeight = useWindowDimensions().height
   const windowWidth = useWindowDimensions().width
-  const bottomInset = useSafeAreaInsets().bottom
   const contentHeight = useSharedValue(0)
   const blurIntensity = useSharedValue(0)
   const [isReady, setIsReady] = useState(false)
@@ -65,10 +64,9 @@ export const BottomSheet = forwardRef(function BottomSheet(
 
     setTimeout(() => {
       setVisible(false)
-      onHide && onHide()
+      onHide?.()
+      setIsReady(false)
     }, duration)
-
-    setIsReady(false)
   }
 
   useImperativeHandle(
@@ -93,13 +91,6 @@ export const BottomSheet = forwardRef(function BottomSheet(
       ],
     }
   })
-
-  const closeStyle = useAnimatedStyle(() => {
-    return {
-      opacity: withTiming(paddingTop.value > 0 ? 1 : 0, animationConfig),
-    }
-  })
-
   const intensityProp = useAnimatedProps(() => {
     return {
       intensity: withTiming(blurIntensity.value, animationConfig),
@@ -115,9 +106,8 @@ export const BottomSheet = forwardRef(function BottomSheet(
       contentHeight.value = newContentHeight
       paddingTop.value = isLargerThanWindow ? topInset : 0
       offset.value = -newContentHeight
+      setIsReady(true)
     }
-
-    setIsReady(true)
   }
 
   const swipeGesture = Gesture.Pan().onEnd((event) => {
@@ -138,7 +128,7 @@ export const BottomSheet = forwardRef(function BottomSheet(
           <View className="left-0 top-0 h-screen w-screen" />
         </Pressable>
 
-        {isReady && (
+        {!isReady && (
           <ActivityIndicator
             color={colors.white}
             className="absolute top-1/2 left-1/2 -translate-x-2 -translate-y-2"
@@ -151,13 +141,17 @@ export const BottomSheet = forwardRef(function BottomSheet(
           <ScrollView>
             <View onLayout={onContentLayout}>
               <Animated.View
-                style={closeStyle}
-                className="z-10 justify-center items-center rounded-full absolute right-6 top-5"
+                className={`z-10 justify-center items-center rounded-full absolute right-6 top-5`}
               >
-                <Icon icon="close" size="large" accessibilityLabel='Close Modal' accessibilityRole="button" onPress={hide} />
+                <Icon
+                  icon="close"
+                  size="large"
+                  accessibilityLabel="Close Modal"
+                  accessibilityRole="button"
+                  onPress={hide}
+                />
               </Animated.View>
               {children}
-              <View style={{ height: bottomInset }} />
             </View>
           </ScrollView>
 

diff --git a/src/components/DetailsModal.tsx b/src/components/DetailsModal.tsx
@@ -12,8 +12,6 @@ export const DetailsModal = () => {
   useEffect(() => {
     if (currentIngredientId || currentEquipmentId) {
       modalRef?.current?.show()
-    } else {
-      modalRef?.current?.hide()
     }
   }, [currentIngredientId, currentEquipmentId])
 

diff --git a/src/components/EquipmentDetails.tsx b/src/components/EquipmentDetails.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import { ScrollView, View } from 'react-native'
 import { GET_EQUIPMENT_DETAILS } from '~/graphql/queries/'
 import { getImageUrl, imageSizes } from '~/utils/getImageUrl'
+import { useSafeAreaInsetsStyle } from '~/utils/useSafeAreaInsetsStyle'
 import { Text } from './Text'
 
 /**
@@ -21,13 +22,13 @@ export const EquipmentDetails = function EquipmentDetails({ equipmentId }: Equip
   const { data, loading } = useQuery(GET_EQUIPMENT_DETAILS, {
     variables: { equipmentId },
   })
-
+  const inset = useSafeAreaInsetsStyle(['bottom'], 'margin')
   const equipment = data?.equipmentCollection.edges[0]?.node
 
   return (
     <>
-      {!loading && (
-        <ScrollView className="p-6 pt-6 flex-">
+      {!loading && data && (
+        <ScrollView className="px-6 pt-6 pb-3" style={inset}>
           <View className="justify-end flex-1">
             <View className="flex-1">
               <Image

diff --git a/src/components/IngredientDetails.tsx b/src/components/IngredientDetails.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from 'react'
 import { View } from 'react-native'
 import { useFetchIngredientDetails, useSession } from '~/hooks'
 import { useAnalytics } from '~/hooks/useAnalytics'
+import { useSafeAreaInsetsStyle } from '~/utils/useSafeAreaInsetsStyle'
 import { Button } from './Button'
 import { Checkbox } from './Checkbox'
 import { HorizontalList } from './HorizontalList'
@@ -27,7 +28,7 @@ export const IngredientDetails = function IngredientDetails({
 }: IngredientDetailsProps) {
   const path = usePathname()
   const showCta = path !== '/add-ingredients'
-
+  const inset = useSafeAreaInsetsStyle(['bottom'], 'margin')
   const { screen, capture } = useAnalytics()
   const { isLoggedIn } = useSession()
   const {
@@ -49,11 +50,11 @@ export const IngredientDetails = function IngredientDetails({
   return (
     <>
       {loading || recipesLoading ? null : (
-        <View className="justify-start flex-1 p-6">
+        <View className="justify-start flex-1 px-6 pt-6 pb-3" style={inset}>
           {/* Name */}
           <View className="mb-3">
             {ingredient?.name && (
-              <Text h2 weight="bold" testID="ingredient-name">
+              <Text h2 weight="bold" styleClassName="pr-10 flex-1" testID="ingredient-name">
                 {ingredient?.name}
               </Text>
             )}

diff --git a/src/hooks/useFetchIngredientDetails.ts b/src/hooks/useFetchIngredientDetails.ts
@@ -93,8 +93,8 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () =>
 
     return {
       ingredient,
-      loading,
-      recipesLoading,
+      loading: loading && !data,
+      recipesLoading: recipesLoading && !relatedRecipes,
       availableRecipes,
       addLoading,
       isInMyBar,