Delay the asyncStatus of a query to avoid flickering when refreshing data. The perfect addition to placeholderData in your paginated queries 💪.

Installation

npm install @pinia/colada-plugin-delay

Usage

import { PiniaColadaDelay } from '@pinia/colada-plugin-delay'

// Pass the plugin to Pinia Colada options
app.use(PiniaColada, {
  // ...
  plugins: [
    PiniaColadaDelay({
      delay: 200, // default delay
    }),
  ],
})

You can customize the delay behavior individually for each query with the delay option:

useQuery({
  key: ['todos'],
  query: getTodos,
  delay: false, // disable delay
})

License

MIT