Render with Suspense

render-with-suspense.js

const IndexList = ({ prefetchedIndexes }) => {
  const data = usePrefetchedQuery(prefetchedIndexes);

  return data.majorIndexesList.map(index => (
    <div key={index.ticker}>
      Show {index.ticker}
    </div>
  ));
};

const App = () => {
  const [prefetchedIndexes, setPrefetchedIndexes] = useState();

  return (
    <>
      <button
        onClick={() => {
            setPrefetchedIndexes(prefetchQuery(`${API}/majors-indexes`));
        }}
      >
        Load all indexes
      </button>
      {prefetchedIndexes && (
        <Suspense fallback={<span>Loading indexes list...</span>}>
          <IndexList prefetchedIndexes={prefetchedIndexes} />
        </Suspense>
      )}
    </>
  );
};