how to add loading component before the data loading in router loader ?

[sharp lion]

i need to add loading component when data loading from the server using router loader, how i can do this with qwik ?

[undone sun]

You muist have a real beefy routeLoader then for this to be necessary. Is it on the first render you mean or because you have a route action that triggers the routeLoader to run again?

[quasi shore]

is the page rendered before the routeLoaders are resolved? 🤔

[sharp lion]

@undone sun @quasi shore i need to render loading component before data load when the router is change in SPA, like facebook when go to another page, you see the loading animation before loading data

[quasi shore]

then, I would probably give up routeLoader in favour of loading data from a useVisibleTask$

const loading = useSignal<boolean>()
const data = useSignal<MyDto>()

useVisibleTask$(async function fetchData() {
  loading.value = true

  try {
    const response = await fetch(/** fetch data */)
    data.value = await response.json()
  } catch (error) {
    /** handle error */
  } finally {
    loading.value = false
  }
})

[undone sun]

Alternatively you can try and implement the view transition api, so as to not give up on performance. Granted it will only give you loading state for browsers that supports it, but this will likely be how you handle these cases in the future.
https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

[quasi shore]

pretty interesting! Would it work on initial loading too ?

[undone sun]

Good question, I’ve only played around with it in an Astro context and didn’t check out initial load.

[supple plaza]

Can you use the useLocation hook, it has isNavigating property. Maybe you can hide/show a loader component based on that?

[quasi shore]

👍🏻 I told myself to try that too @supple plaza

[sharp lion]

i dont understand the idea, can you explain more if you have time

[quasi shore]

useLocation exposes isNavigating. While routing – hence while fetching route's data? – you could look up isNavigating to display a loader. Just an idea, still has to be challenge to your use case

[sharp lion]

i will try and i will tell you the result

[supple plaza]

Hey @sharp lion if I understand your post correctly you want to show a loader while SPA navigating to the next page? If that's correct you can use something like this:

export default component$(() => {
  const nav = useLocation();
  // You can event useComputed of nav.isNavigating for fancy stuff like delayed loader etc.
  return <>
    {nav.isNavigating && <Loader></Loader>}
...
</>
})

You can place this in a layout.tsx.