How to set loader for SPA while loading other route?

[wild light]

on click of the links, pages take time to load. Is there a way to show a loader till it fetchs the files?

[muted stag]

Something like nprogress (https://ricostacruz.com/nprogress/)?

[autumn solar]

I'm interested also 🙂

[wild light]

Yes! Something like nprogess

[scarlet mica]

Have you tried location.isNavigating ?

[wild light]

not yet, I was hoping Qwik already have something out of the box.

[wild light]

So there is no easy way? I am trying to launch https://fugit.app but I got feedbacks like the website seems unresponsive sometimes, as on click on navigation we expect somethig to happen. But it takes a bit of time to load.

[eternal shoal]

What tzdesign described is built-in to qwik-city (and new to me 😉 ) but here's an example of a layout.tsx that would add a loading state while there's a pending navigation.

import { component$, Slot } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const location = useLocation();
  return (
    <div class="page">
      <main>
        {location.isNavigating && (
          <p
            style={{ position: 'fixed', top: 0, left: 0, background: 'white' }}
          >
            Loading
          </p>
        )}
        <Slot />
      </main>
    </div>
  );
});

Full sample here: https://stackblitz.com/edit/qwik-starter-x5xj6k

[wild light]

Ahh! looks like a clean solution which I misunderstood

[scarlet mica]

Sorry i didn’t unfold my knowledge completely 😄 thanks @eternal shoal

[autumn solar]

See the following integration of nprogress in qwik, by clicking over the flower, and the qwik logo. https://stackblitz.com/edit/qwik-starter-cdcb9v?file=src%2Fcomponents%2Fstarter%2Fheader%2Fheader.tsx

[placid shale]

@wild light
I just created a simple component to add seamlessly nprogress into a qwik city app.
There you go !
https://www.npmjs.com/package/@quasarwork/qwik-city-nprogress