How do I configure AppLoading for a json url?

Expo Development Tools
1

how to configure AppLoading for urls like in this code:

makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=10`;
    this.setState({ loading: true });
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          filteredUsers: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };
2

<AppLoading /> is just a React component that tells Expo to keep showing your loading screen until your project is ready to be rendered (docs here).

You don’t ever go from not rendering AppLoading to rendering it. You’d generally start your React component in a state with loading = true and then later set loading = false, but never set loading = true again. If you want to show a loading spinner, use a different state variable to track that.

This is a minimal example (written to communicate some ideas, not be copy-pasteable):

class App extends React.Component {
  // Start in the loading state. We can go from "is loading" to
  // "is not loading" but never the other way.
  state = { loading: true };

  render() {
    if (this.state.loading) {
      return <AppLoading />;
    }
    return <YourRegularComponents />;
  }

  componentDidMount() {
    // Set the loading state only 
    this.makeRemoteRequest().then(() => {
      // Hide the loading screen and reveal the app
      this.setState({ loading: false });
    }, error => {
      console.error(error);
      // We still want to hide the loading screen but probably want to render
      // an error message too. How you do that is up to you.
      this.setState({ loading: false });
    });
  }
}
1 Like
3

i kno this approach but still it takes time to render the list even the loading gets to false . what needs to be done for that?

4

Just don’t call
this.setState({ loading: false });
until your list contents have loaded and the list is rendered.