Snippet of React Suspense component, which can be used to show fallback UI while a component loading data

ReactSuspenseComponent.js

import { Suspense } from "react";

export const fakeTimeout = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const wrapPromise = (promise) => {
  let status = "pending";
  let result = "";
  let suspender = promise.then(
    (res) => {
      status = "success";
      result = res;
    },
    (err) => {
      status = "error";
      result = err;
    }
  );

  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    },
  };
};

const getUser = async () => {
  await fakeTimeout(3000);
  return {
    name: "Utkarsh Anand",
  };
};

const fetchUser = wrapPromise(getUser());

const User = () => {
  const user = fetchUser.read();

  return <div>name - {user.name}</div>;
};

export default function App() {
  return (
    <div className="App">
      <h3>React Suspense</h3>
      <Suspense fallback={<p>loading component</p>}>
        <User />
      </Suspense>
    </div>
  );
}