new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · API · all subjects

composables/useloadingindicator

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useLoadingIndicator composable signature

useLoadingIndicator is a composable available from Nuxt 3.9+ that gives access to the loading state of the app page. It returns an object with properties isLoading, error, and progress, and methods start(), set(), finish(), and clear().

useLoadingIndicator parameters

useLoadingIndicator accepts the following parameters: duration (Duration of the loading bar in milliseconds, default 2000), throttle (Throttle the appearing and hiding in milliseconds, default 200), and estimatedProgress (A custom function that receives the duration and elapsed time and returns a value between 0 and 100 to customize progress estimation; by default Nuxt backs off as it approaches 100%).

useLoadingIndicator.isLoading property

The isLoading property has type Readonly<ShallowRef<boolean>> and represents the loading state.

useLoadingIndicator.error property

The error property has type Readonly<ShallowRef<boolean>> and represents the error state.

useLoadingIndicator.progress property

The progress property has type Readonly<ShallowRef<number>> and represents the progress state with a value from 0 to 100.

useLoadingIndicator.start() method

The start() method sets isLoading to true and starts to increase the progress value. It accepts a { force: true } option to skip the interval and show the loading state immediately.

useLoadingIndicator.set() method

The set() method sets the progress value to a specific value. It accepts a { force: true } option to skip the interval and show the loading state immediately.

useLoadingIndicator.finish() method

The finish() method sets the progress value to 100, stops all timers and intervals, then resets the loading state 500 ms later. It accepts a { force: true } option to skip the interval before the state is reset, and { error: true } option to change the loading bar color and set the error property to true.

useLoadingIndicator.clear() method

The clear() method clears all timers and intervals used by the composable. It is used internally by finish().

useLoadingIndicator basic usage example

<script setup lang="ts"> const { progress, isLoading, start, finish, clear } = useLoadingIndicator({ duration: 2000, throttle: 200, // This is how progress is calculated by default estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50), }) </script>

useLoadingIndicator start with force option example

<script setup lang="ts"> const { start, set } = useLoadingIndicator() // same as set(0, { force: true }) // set the progress to 0, and show loading immediately start({ force: true }) </script>

Give your agent this brain