@stable-spin/vue NPM

@stable-spin/vue

A Vue composable to display spinners in user friendly way.

Highlights

Prevents the flickering of loading spinners
Works with React, Vue, Svelte and Angular
Easy to use API

Overview

Sometimes, network requests are too fast. The user clicks on a button, the loading spinner is visible for just 50-100ms, you've got a flickering loading spinner. This is a bad user experience.

To solve the issue we do not show the loading spinner if the request finishes in under 100ms. If the request takes longer than 100ms we display a spinner for at least 200ms. If we don't do that and the request finishes after 150ms, we'll have the flickering spinner again. That's why we show it for at least 200ms.

There are also other packages for React, Svelte and Angular.

Author

Hey, I'm Nils. In my spare time I write about things I learned or I create open source packages, that help me (and hopefully you) to build better apps.

Usage

<template>
  <span v-if="showSpinner">Loading...</span>

  <div v-else>
    <!-- Your content -->
  </div>
</template>

<script setup lang="ts">
import { useStableSpin } from "@stable-spin/vue";

const isLoading = ref(false);
const showSpinner = useStableSpin(isLoading);

onMounted(() => {
  isLoading.value = true;

  fetch("https://my-endpoint.com")
    .then((res) => res.json())
    .then((res) => (isLoading.value = false));
});
</script>