Sha256: ba070aa05179d05181cbed8c6316fdbe68b27bd0b3528b00788c1657fa3611c7
Contents?: true
Size: 1.4 KB
Versions: 26
Compression:
Stored size: 1.4 KB
Contents
import { AsyncResource } from 'node:async_hooks';
import { useState } from './use-state.mjs';
import { useEffect } from './use-effect.mjs';
import { makeTheme } from './make-theme.mjs';
export function usePrefix({ status = 'idle', theme, }) {
const [showLoader, setShowLoader] = useState(false);
const [tick, setTick] = useState(0);
const { prefix, spinner } = makeTheme(theme);
useEffect(() => {
if (status === 'loading') {
let tickInterval;
let inc = -1;
// Delay displaying spinner by 300ms, to avoid flickering
const delayTimeout = setTimeout(AsyncResource.bind(() => {
setShowLoader(true);
tickInterval = setInterval(AsyncResource.bind(() => {
inc = inc + 1;
setTick(inc % spinner.frames.length);
}), spinner.interval);
}), 300);
return () => {
clearTimeout(delayTimeout);
clearInterval(tickInterval);
};
}
else {
setShowLoader(false);
}
}, [status]);
if (showLoader) {
return spinner.frames[tick];
}
// There's a delay before we show the loader. So we want to ignore `loading` here, and pass idle instead.
const iconName = status === 'loading' ? 'idle' : status;
return typeof prefix === 'string' ? prefix : prefix[iconName];
}
Version data entries
26 entries across 26 versions & 1 rubygems