How to let content load?

Question

React

Hello everyone. I am making a mobile application on React native. I receive a huge number of photos from the server and display them in a list in two columns in a FlatList. Question: How to let all photos load, and only then display the component on the screen.
At the moment I am doing this

class App extends Component{

    state={
        loading: true
    }
    componentDidMount(){
        setTimeout(this.statusChange, 4000)
    }
    statusChange = () => {
        this.setState({
            loading:false
        })
    }


render(){
        if(this.state.loading){
            return <ActivityIndicator size="large" color="#BA5C06" style={styles.loading} />
        }
return(
<View><Text>Content<Text></View>
)
}
}

But I think it's a crutch. How to solve this problem correctly?

Answer 1

the best you can do is to use https://github.com/DylanVann/react-native-fast-image and show the preloader for every photo you upload. You can also use preload at the start of the application to immediately preload photos