netflix-with-suspense.js

import React, { Suspense, lazy } from "react";
import axios from "axios";

// Thumbnails now lives in a different file (as it should)
// We dynamically import it when it's needed
const Videos = lazy(() => import("./Thumbnails"));

const Videos = ({ items }) => (
  <Thumbnails>
    {items.map(primeVideos => (
      <Thumbnail primeVides={primeVideos} />
    ))}
  </Thumbnails>
);

const Blurred = () => (
  // This component might just render a blurred out square the same size as the Thumbnails
)

// Now we are using Suspense to blur out the thumbnails without
// blocking the rest of the page's UI, and with no loading spinner
const AsyncVideos = ({ videos }) => (
  <Suspense fallback={<Blurred />}>
    <Videos videos={videos} />
  </Suspense>
);

// This screen will display while we are waiting for the data
// back from the API
const Loading = () => <div>Loading...</div>;

// This screen will display once ALL of the data comes back
// from the API
const VideoPage = ({ primeVideos, featuredMovies, genres }) => (
  <Layout>
    <Grid>
      <Row columns={3}>
        <AsyncVideos videos={primeVideos} />
      </Row>
      <Row columns={3}>
        <AsyncVideos videos={featuredMovies} />
      </Row>
      <Row columns={4}>
        <AsyncVideos videos={genres} />
      </Row>
    </Grid>
  </Layout>
);

class App extends React.Component {
  state = {
    primeVideos: [],
    genres: [],
    featuredMovies: [],
    loading: false
  };

  componentDidMount() {
    // We'll set loading to true, so that the Loading spinner appears
    this.setState({ loading: true });
    axios.get("path-to-netflix-api").then(response => {
      const { primeVideos, genres, featuredMovies } = response.data;
      this.setState({ primeVideos, genres, featuredMovies });
      // Once we actually get the data back, we set loading to false
      // so we can actaully display the video page
      this.setState({ loading: false });
    });
  }

  render() {
    const { primeVideos, genres, featuredMovies, loading } = this.state;
    return (
      <div>
        {this.state.loading ? (
          <Loading />
        ) : (
          <VideoPage
            primeVideos={primeVideos}
            genres={genres}
            featuredMovies={featuredMovies}
          />
        )}
      </div>
    );
  }
}