How to view defer loading state, similar to loader with useNavigate

[cliffordfajardo]

Background Context

For example I know with loader you can use useNavigate to see if some data is in progress

const SomeComponent = () => {
  const navigation = useNavigation();
  const isLoading = navigation.state !== 'idle'
  return (<p>Are we loading? :{isLoading}</>)
}

However, is there a similar way to hook into the progress of data that is coming from defer?
Use case: implement a spinner outside of where the stream'd data is rendered

const SomeComponentWhereDeferDataWillRender = () => {
  return (
     <Suspense fallback={<div>Loading...</div>}>
      <Await resolve={somePromise}> {(resolvedValue) => <p>{resolvedValue}</p>}</Await>
     </Suspense>;
  )
}

const PageComponent = () => {
   const isLoading = /*somehow hook into the defer?*/
  
   return (
    <TopNav isLoading={isLoading} />
    <SomeComponentWhereDeferDataWillRender />
  );
}
 

When I hook into useNavigate it doesnt seem to update when I make a page transition:

• Home page ---> Page with defer
• useNavigate doesnt update, it remains idle
  Stackblitz Code

defer-data.mp4

References

• Remix Discord Thread
• useNavigate
• defer
• stackblitz example

[isc30]

same question here, havent found a solution :(

[melgrove]

The main issue here is that the deferred value (promise) does not trigger a state update when it resolves. I had the same problem and I've achieved this by using useEffect and awaiting the promise directly. In the original example it would be like this:

const SomeComponentWhereDeferDataWillRender = ({ setIsLoading }) => {
  useEffect(() => {
    (async () => {
      await somePromise;
      setIsLoading(false);
    })();
  }, [setIsLoading, somePromise]);

  return (
    <Suspense fallback={<div>Loading...</div>}>
    <Await resolve={somePromise}> {(resolvedValue) => <p>{resolvedValue}</p>}</Await>
    </Suspense>
  );
}

const PageComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  
  return (
    <TopNav isLoading={isLoading} />
    <SomeComponentWhereDeferDataWillRender setIsLoading={setIsLoading} />
  );
}