When should I hide the Loading Component?

[bloggerklik]

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>
)