Not properly working together with <React.Supsense> component

[simonsystem]

I'm trying to keep my application rendered with a global loading animation, as long as I can.

But when throwing that pending Promise first, no more requests are made and no more data is fetched from feathers server. Because that component isn't mounted yet, the useEffect() hook inside of figbirds useQuery() function is never called.

// ./src/App.tsx
import React from 'react';
import MyComponent from './MyComponent';

const App: React.FC<{}> = () => (
  <React.Suspense fallback={<h1>loading ...</h1>}>
    <MyComponent userId="1" />
  </React.Suspense>
);
export default App;

// ./src/MyComponent.tsx
import React from 'react';
import { useFind, useGet } from 'figbird';
const pending = new Promise(() => {});

const MyComponent: React.FC<{ userId: string }> = ({ userId }) => {
  const result = useGet('user', userId);
  if (result.isFetching) throw pending;
  
  return (
    <h1>Hello {result.data.username}</h1>
  );
};
export default MyComponent;

On searching for issues, I found this: facebook/react#18749 (comment)

This is expected. useEffect is triggered after a component is rendered and committed. If it is suspended, it's not going to happen

Can we please rewrite figbird not to start that feathers request inside of a useEffect() hook, instead let's use e.g. the use() hook on a Promise, like here https://react.dev/reference/react/use ? That could fix it, right?