SlowSuspenseUsage.js

import React from "react";
import useSWR from "swr";
import { GridSpinner } from "react-spinners-kit";
import { SlowSuspense } from "containers/SlowSuspense";
import { UserCard } from "components/UserCard";

const endpoint = "https://api.github.com";

const fetcher = key =>
  fetch({ url: `${endpoint}/users/${key}` }).then(res => res.json());

const useGithubData = user => {
  const { data } = useSWR(user, fetcher, {
    suspense: true,
    shouldRetryOnError: false,
    revalidateOnFocus: false
  });
  return data;
};

const GithubData = ({ user }) => {
  const data = useGithubData(user);
  return <UserCard {...data} />
};

const Fallback = () => (
  <div className="spinner-container">
    <GridSpinner color="hotpink" />
  </div>
);

export const App = () => (
  <SlowSuspense fallback={<Fallback/>}>
    <GithubData user="icyJoseph" />
  </SlowSuspense>
);