Suspense

Problem

How to show something while a component is loading?

Solution

Use <Suspense fallback={ whatever } > <ComponentToLoad /> </Suspense>

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
  const conf = await db.Confs.find({ slug });
  return (
    <ConferenceLayout conf={conf}>
      <Suspense fallback={<TalksLoading />}>
        <Talks confId={conf.id} />
      </Suspense>
    </ConferenceLayout>
  );
}

async function Talks({ confId }) {
  const talks = await db.Talks.findAll({ confId });
  const videos = talks.map(talk => talk.video);
  return <SearchableVideoList videos={videos} />;
}

// Lazy loading components


const Component = lazy(
  () => import('./Component')
)



<Suspense fallback={<Loading />} >
  <Component />
</Suspense>