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 (
+
+ {isLoading && }
+
+ )
+}
+
function renderItem({item}: {item: ClipClop}) {
return
}
@@ -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={}
/>