@manzano/use-is-active

Tiny hook for an optimal UX loading indication.

No flickering UI anymore!

• If your loading state lasts less than 800ms (by default), no loading indicator at all will be displayed to the user
• Otherwise, if it exceeds this threshold, your loading indicator will start and last at least 1000ms (by default) even if your actual loading state ends before.

Installation

# NPM
npm install @manzano/use-is-active

# YARN
yarn add @manzano/use-is-active

@manzano/use-is-active 1.x.x requires React 16.8.3 or later.

Usage

import { useIsActive } from '@manzano/use-is-active';

export function LoadingIndicator({ isLoading }: { isLoading: boolean }) {
  const isActive = useIsActive(isLoading);

  return isActive ? <div>Loading...</div> : null;
}

The hook takes your actual loading boolean variable as param and returns the UX optimized one.

Options override

By default, the delay before activation is 800ms and the minimal duration is 1000ms. You can override these values by context provider.

Example:

import { ActivityOptionsProvider } from '@manzano/use-is-active';

root.render(
  <ActivityOptionsProvider delayBeforeActivation={300} minActiveDuration={1500}>
    <App />
  </ActivityOptionsProvider>,
);