Hello community 👋

Sometimes calls can take longer, so showing a loading spinner becomes an option to fill the gap. I was tired of configuring such spinners times and times again.

Yesterday I built a tiny Javascript library called use-spinner that simply wraps asynchronous calls into a new function adding a loading spinner to the DOM.

Simply install the module

$ npm install --save use-spinner

and embed it in your Node.js styled application.

import useSpinner from 'use-spinner';

import 'use-spinner/assets/use-spinner.css';

const mySlowCall = async () => {
  return await fetch(/*...*/);
}

const spinned = useSpinner(mySlowCall);

await spinned();

Of course, it is rather rudimentary right now and the spinner itself is hardly customizable. However, I like the easiness of integration to existing functions without much configuration.

Enjoy ❤️

$ npm install --save use-spinner

import useSpinner from 'use-spinner';

import 'use-spinner/assets/use-spinner.css';

const fn = async () => {
  await new Promise(resolve => setTimeout(() => {
    console.log('done.');
    resolve();
  }, 2000));
};

// wrap your asynchronous function
const spinnedFn = useSpinner(fn, {
  container: 'body'
});

// execute with a loading spinner
await spinnedFn();

{
  container: 'body'
}