From 4e9ee4ecbc234893f79c0e989427f13b8e1a0641 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 25 Apr 2024 12:07:55 -0700
Subject: [PATCH] add a spinner

---
 src/components/ClipClopTest/ClipClopList.tsx | 26 +++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/ClipClopTest/ClipClopList.tsx b/src/components/ClipClopTest/ClipClopList.tsx
index 7158135275..b7c9fe001f 100644
--- a/src/components/ClipClopTest/ClipClopList.tsx
+++ b/src/components/ClipClopTest/ClipClopList.tsx
@@ -7,6 +7,7 @@ import {
   ClipClop,
   placeholderClops,
 } from '#/components/ClipClopTest/RandomClipClops'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
 function ClipClopItem({item}: {item: ClipClop}) {
@@ -28,6 +29,20 @@ function ClipClopItem({item}: {item: ClipClop}) {
   )
 }
 
+function MaybeLoader({isLoading}: {isLoading: boolean}) {
+  return (
+    <View
+      style={{
+        height: 50,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      {isLoading && <Loader size="xl" />}
+    </View>
+  )
+}
+
 function renderItem({item}: {item: ClipClop}) {
   return <ClipClopItem item={item} />
 }
@@ -50,6 +65,8 @@ export const ClipClopList = () => {
   // total number of clops
   const totalClops = React.useRef(10)
 
+  const [showSpinner, setShowSpinner] = React.useState(false)
+
   const [clops, setClops] = React.useState(
     Array.from(Array(10).keys()).map(n => ({
       id: generateUniqueKey(),
@@ -91,12 +108,6 @@ export const ClipClopList = () => {
         const firstVisibleIndex = info.viewableItems[0]?.index
 
         isAtBottom.current = Number(firstVisibleIndex) < 2
-
-        console.log({
-          firstVisibleIndex,
-          totalClops: totalClops.current,
-          isAtBottom: isAtBottom.current,
-        })
       },
       {
         itemVisiblePercentThreshold: 100,
@@ -112,6 +123,7 @@ export const ClipClopList = () => {
       }
 
       isFetching.current = false
+      setShowSpinner(false)
     },
     [clops],
   )
@@ -119,6 +131,7 @@ export const ClipClopList = () => {
   const onEndReached = () => {
     if (isFetching.current) return
     isFetching.current = true
+    setShowSpinner(true)
 
     // We wouldn't actually use a timeout, but there would be a delay while loading
     setTimeout(() => {
@@ -147,6 +160,7 @@ export const ClipClopList = () => {
         maxToRenderPerBatch={20}
         inverted
         onEndReached={onEndReached}
+        ListFooterComponent={<MaybeLoader isLoading={showSpinner} />}
       />
       <Button title="Add New Clip" onPress={addNewClip} />
     </View>