lazy load react component

malcolm-kee · Feb 9, 2019 · ec5994e · ec5994e
1 parent 55cfe8a
commit ec5994e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/app.js b/src/app.js
@@ -2,11 +2,12 @@ import React from 'react';
 import { loadMovies } from './api';
 import { BusyContainer } from './components/busy-container';
 import { Button } from './components/button';
-import { Movie } from './components/movie';
 import { TitleBar } from './components/title-bar';
 import { useToggle } from './hooks/use-toggle';
 import { MovieForm } from './movie-form';
 
+const Movie = React.lazy(() => import('./components/movie'));
+
 function useMovieData() {
   const [movies, setMovies] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(true);
@@ -76,14 +77,16 @@ function App() {
           </div>
           {moviesShown && (
             <BusyContainer isLoading={isLoading}>
-              {movies.map(movie => (
-                <Movie
-                  name={movie.name}
-                  releaseDate={movie.releaseDate}
-                  onClick={() => selectMovie(movie)}
-                  key={movie.id}
-                />
-              ))}
+              <React.Suspense fallback={<span className="spinner" />}>
+                {movies.map(movie => (
+                  <Movie
+                    name={movie.name}
+                    releaseDate={movie.releaseDate}
+                    onClick={() => selectMovie(movie)}
+                    key={movie.id}
+                  />
+                ))}
+              </React.Suspense>
             </BusyContainer>
           )}
         </div>

diff --git a/src/components/movie.js b/src/components/movie.js
@@ -11,3 +11,5 @@ export const Movie = props => (
     <h2>{props.releaseDate}</h2>
   </div>
 );
+
+export default Movie;