[Pending UI] How to tell if a Partial is loading?

[mciparelli]

With the addition of partials I'm wondering if it's possible to display a pending UI state while the partial is loading

[marvinhagemeister]

We currently don't have a solution for that, but it's something very much on my mind. I played around with various approaches but haven't found the right one yet. Stay tuned!

[Sleepful]

Hi @marvinhagemeister , any progress with this?
For reference, this is how HTMX handles it:

https://htmx.org/attributes/hx-indicator/

[marvinhagemeister]

No progress. Work on Fresh is currently paused in favour of helping out with Deno 2.

[Sleepful]

Got it, thanks marvin. As reference, this issue might be related:

#2234

[sinyo-matu]

@marvinhagemeister
I'm really looking forward to this feature.
Is there any update on its progress in Fresh2? Thank you!

[adamgreg]

In case it helps anyone, I work around the lack of this feature in Fresh by including an island within the partial response. The island includes nothing but a useEffect() hook, which dispatches a CustomEvent with "partial-loaded" type, and the name of the partial as detail.

[sinyo-matu]

Thanks！ @adamgreg
Could you please provide a sample of your workaround?

[adamgreg]

Sure, though there's not much more to it:

The island:

export function NotifyPartialLoaded({ partialName }: { partialName: string }) {
  useEffect(() => {
    dispatchEvent(new CustomEvent("partial-loaded", { detail: partialName }));
  });

  return null;
}

Be careful of the dependency array of the useEffect() hook. I've omitted it so that an event should be dispatched on every render.

In your route:

      <Partial name="my-partial">
        <NotifyPartialLoaded partialName="my-partial" />
      </Partial>

In some other island that needs to respond to the partial being loaded:

  useEffect(() => {
    const onPartialLoaded = () => {
        ....
    }

    globalThis.addEventListener("partial-loaded", onPartialLoaded, {
      once: true,
    });

    return () => {
      globalThis.removeEventListener("partial-loaded", onPartialLoaded);
    };
  }, []);

[LasseRosenow]

I really like how Next.js and similarly react-router v7 handle this:

Effectively in Next.js you put call the useLinkStatus() hook within a <Link> component. And this will tell you, if the <Link> component is currently in pending state.

In react-router v7 you have the .pending css class being automatcially applied and you can also access the pending state in the components.js similar to how next.js does it, but with a callback like structure instead.

Sources:
https://nextjs.org/docs/app/api-reference/functions/use-link-status
https://reactrouter.com/start/framework/pending-ui