Abscract loading spinner

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>

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) {

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>

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>
+  );
+}