react-suspender-ts

You seem tired of waiting for library XYZ to support React.Suspense. At least, that's why you came here.

Use react-suspender-ts. It is very good.

Installation

Yarn

yarn add react-suspender-ts

npm

npm install --save react-suspender-ts

Usage

Parent component

// App.tsx
import React from 'react';
import { Dashboard } from './Dashboard';

export function App() {
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <Dashboard/>
    </React.Suspense>
  )
}

The component which wants to propagate its loading state

// Dashboard.tsx
import React, { useEffect } from 'react';
import { Suspender } from 'react-suspender-ts';

export function Dashboard() {
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const timeout = setTimeout(() => {
      setLoading(false);
    }, 1000);

    return () => {
      clearTimeout(timeout);
    };
  }, []);
  
  if (loading) {
    return <Suspender/>;
    
    // Alternatively, you can use the `suspend` function,
    // which is also exported by react-suspender-ts
    //
    // return suspend();
  }

  return (
    <div>
      ...
    </div>
  );
}

License

MIT © Amadeus Beckmann