📜 Spinner Component

Introduction

Whenever there is something loading, it’s always a good choice to let the user know. An easy way to achieve this, is by creating a Spinner Component wich indicates visually that there is something loading.

---

Implementing

Since this is a component, that I can reuse in my other projects as well, I will place it in the component folder:

src/components/spinner.tsx

import { LucideLoaderCircle } from "lucide-react";
 
const Spinner = () => {
  return (
    <div
      role="status"
      className="flex-1 flex flex-col items-center justify-center self-center"
    >
      <LucideLoaderCircle className="h-16 w-16 animate-spin" />
    </div>
  );
};
 
export { Spinner };

Now whenever there is something slow going on in my application, I can display this component in combination with a suspense.