Fine-grained Loading API in Nuxt

In Nuxt we can get detailed information on how our page is loading with the useLoadingIndicator composable:

const {
  progress,
  isLoading,
} = useLoadingIndicator();

console.log(`Loaded ${progress.value}%`); // 34%

It’s used internally by the <NuxtLoadingIndicator> component, and can be triggered through the page:loading:start and page:loading:end hooks (if you’re writing a plugin).

But we have lots of control over how the loading indicator operates:

const {
  progress,
  isLoading,
  start,      // Start from 0
  set,        // Overwrite progress
  finish,     // Finish and cleanup
  clear       // Clean up all timers and reset
} = useLoadingIndicator({
  duration: 1000,  // Defaults to 2000
  throttle: 300,   // Defaults to 200
});

We’re able to specifically set the duration, which is needed so we can calculate the progress as a percentage. The throttle value controls how quickly the progress value will update — useful if you have lots of interactions that you want to smooth out.

The difference between finish and clear is important. While clear resets all internal timers, it doesn’t reset any values.

The finish method is needed for that, and makes for more graceful UX. It sets the progress to 100, isLoading to true, and then waits half a second (500ms). After that, it will reset all values back to their initial state.