Skip to content

Instantly share code, notes, and snippets.

@everdimension
Created October 7, 2022 15:22
Show Gist options
  • Save everdimension/fc4eb699d8eb36b8f051ba37bc3532e3 to your computer and use it in GitHub Desktop.
Save everdimension/fc4eb699d8eb36b8f051ba37bc3532e3 to your computer and use it in GitHub Desktop.
A javascript spinner used to visually help detect freezes in the UI
function JsSpinner() {
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
let deg = 0;
let id = 0;
function rotate() {
id = requestAnimationFrame(() => {
ref.current.style.transform = `rotate(${(deg += 2) % 360}deg)`;
rotate();
});
}
rotate();
return () => {
cancelAnimationFrame(id);
};
}, []);
return (
<div
ref={ref}
style={{ height: 20, width: 2, backgroundColor: 'magenta' }}
></div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment