suspense with async data fetching

suspense

import { Suspense } from 'react';

export default function Test() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Shows />
    </Suspense>
  );
}

function fetchUsers() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([{
        id: 123,
        name: 'Ringo Starr',
      }, {
        id: 124,
        name: 'Osama Starr',
      }]);
    }, 500);
  });
}

function osama() {
  let status = 'pending';
  let result;
  let suspender = fetchUsers().then(
    (r) => {
      status = "success";
      result = r;
    },
    (e) => {
      status = "error";
      result = e;
    }
  );

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

const resource = osama();
const Shows = () => {

  resource.read();
  return (
    <div>

    </div>
  );
};