From 51d9178e5bb434d2f36170fea47b0d9b610d5e0b Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Fri, 14 Jun 2024 19:12:50 +0530
Subject: [PATCH] Abscract loading spinner

---
 src/app/paperless/page.tsx         |  8 +++-----
 src/app/setup/page.tsx             |  9 ++-------
 src/app/sign-in/page.tsx           |  3 ++-
 src/components/loading-spinner.tsx | 14 ++++++++++++++
 4 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/components/loading-spinner.tsx

diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index 0842945..88b2d20 100644
--- a/src/app/paperless/page.tsx
+++ b/src/app/paperless/page.tsx
@@ -15,13 +15,14 @@ import {
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback } from "react";
-import { ExternalLink, LoaderCircle } from "lucide-react";
+import { ExternalLink } from "lucide-react";
 import { useEffect } from "react";
 import {
   useQuery,
   QueryClientProvider,
   QueryClient,
 } from "@tanstack/react-query";
+import LoadingSpinner from "@/components/loading-spinner";
 
 function DocumentsSearch() {
   const formSchema = z.object({
@@ -138,10 +139,7 @@ function DocumentsPage() {
   return (
     <div>
       {QueryResult.isLoading ? (
-        <div className="flex flex-row place-content-center gap-1">
-          <LoaderCircle className="animate-spin" />
-          Loading...
-        </div>
+        <LoadingSpinner>Loading...</LoadingSpinner>
       ) : QueryResult.data?.data ? (
         <div className="flex flex-col gap-4">
           <h1 className="text-2xl font-bold">Search Results</h1>
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index 36c908c..bc0db87 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -19,7 +19,7 @@ import { useForm } from "react-hook-form";
 import { Dispatch, SetStateAction } from "react";
 import { useUser } from "@clerk/nextjs";
 import { redirect, usePathname } from "next/navigation";
-import { LoaderCircle } from "lucide-react";
+import LoadingSpinner from "@/components/loading-spinner";
 
 function FullName({
   setActiveTab,
@@ -31,12 +31,7 @@ function FullName({
 
   if (!isLoaded) {
     // Handle loading state however you like
-    return (
-      <div className="flex flex-row place-content-center gap-1">
-        <LoaderCircle className="animate-spin" />
-        Loading...
-      </div>
-    );
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
   }
 
   if (!user) {
diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
index f85ab1d..7328fa7 100644
--- a/src/app/sign-in/page.tsx
+++ b/src/app/sign-in/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import LoadingSpinner from "@/components/loading-spinner";
 import { RedirectToSignIn, SignedIn, SignedOut } from "@clerk/nextjs";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -11,7 +12,7 @@ export default function SignIn() {
   return (
     <div className="text-xl">
       <SignedOut>
-        Signing you in...
+        <LoadingSpinner>Signing you in...</LoadingSpinner>
         <RedirectToSignIn signInForceRedirectUrl={redirect} />
       </SignedOut>
       <SignedIn>
diff --git a/src/components/loading-spinner.tsx b/src/components/loading-spinner.tsx
new file mode 100644
index 0000000..bbc6cab
--- /dev/null
+++ b/src/components/loading-spinner.tsx
@@ -0,0 +1,14 @@
+import { LoaderCircle } from "lucide-react";
+
+interface LoadingSpinnerProps {
+  children: React.ReactNode;
+}
+
+export default function LoadingSpinner({ children }: LoadingSpinnerProps) {
+  return (
+    <div className="flex flex-row place-content-center gap-1">
+      <LoaderCircle className="animate-spin" />
+      {children}
+    </div>
+  );
+}