When should I hide the Loading Component in React Native FlashList?

There is a delay when items are displayed on the screen. That’s why I created a Loading component on top of the Flashlist. But when should I hide it? How can I make sure it’s listed on the screen?

What I want to do is definitely not this; If there is data, hide Loading. Because even if there is data, the items will not be visible for a while.

    const [load, setLoad] = useState(true);
    
    return (
        <View>
            {
                load ?
    
                    <View style={{ position: 'absolute', zIndex: 10 }}>
                        <Text>Loading...</Text>
                    </View>
    
                    :
    
                    null
            }
            <FlashList />
        </View>
    )

Im assuming that you mean @shopify/flash-list

In Flat list we encounter the delay by using initialNumToRender but its not supported in flashList.

There are also FlatList props that would bring no value if ported to
FlashList due to the differences in their underlying implementation

disableVirtualization getItemLayout initialNumToRender
maxToRenderPerBatch recordInteraction setNativeProps
updateCellsBatchingPeriod

We don’t currently plan to implement these props.

but there is onload which will be triggered once the items are drawn.

onLoad: (info: { elapsedTimeInMs: number }) => void;

the loading will be hidden once the items are drawn on the screen

const [isLoading, setIsLoading] = useState(true);

const handleFlashListLoad = (info) => {
    setIsLoading(false);
};

  return (
    <View>
      {isLoading ? (
        <View style={{ position: 'absolute', zIndex: 10 }}>
          <Text>Loading...</Text>
        </View>
      ) : null}
      <FlashList onLoad={handleFlashListLoad} />
    </View>
)