React - Create Loader.js

Components/Loader.js

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  font-size: 28px;
  margin-top: 20px;
`;

export default () => (
  <Container>
    <span role="img" aria-label="Loading">
      ⏰
    </span>
  </Container>
);

Movie/MoviePresenter.js

import Loader from "Components/Loader";
import Helmet from "react-helmet";

const MoviePresenter = ({ nowPlaying, upcoming, popular, error, loading }) => (
  <>
    <Helmet>
      <title>Movies | Nomflix</title>
    </Helmet>
    {loading ? <Loader /> : <h2>heloo</h2>}
  </>
);
export default MoviePresenter;

  <Loader>는 MovieContainer에서 api를 완전히 가져오기 전까지는 loading이 true인 상태다. 그 때 보여주는 component다.

참고 자료

• 노마드 코더의 React 멤버쉽 강의

소스 코드

github.com/zpskek/Nomflix-v2/commit/f45d1c1374f722914bb9a202cc895456510b54e9