From 1a99f2c86070c37b5bbd4a0f1f9346e0672ad064 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 18 Jun 2025 15:30:09 +0100
Subject: [PATCH] Loading chip refactor

---
 src/components/GenerateGuide/AIGuideContent.tsx  |  7 ++-----
 src/components/GenerateGuide/GenerateAIGuide.tsx |  4 ++--
 src/components/LoadingChip.tsx                   | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 src/components/LoadingChip.tsx

diff --git a/src/components/GenerateGuide/AIGuideContent.tsx b/src/components/GenerateGuide/AIGuideContent.tsx
index 7d7bee398..68999c384 100644
--- a/src/components/GenerateGuide/AIGuideContent.tsx
+++ b/src/components/GenerateGuide/AIGuideContent.tsx
@@ -1,7 +1,7 @@
-import { Loader2Icon } from 'lucide-react';
 import './AIGuideContent.css';
 import { AIGuideRegenerate } from './AIGuideRegenerate';
 import { cn } from '../../lib/classname';
+import { LoadingChip } from '../LoadingChip';
 
 type AIGuideContentProps = {
   html: string;
@@ -26,10 +26,7 @@ export function AIGuideContent(props: AIGuideContentProps) {
 
       {isRegenerating && !html && (
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="flex items-center gap-2 rounded-lg border bg-white p-2">
-            <Loader2Icon className="size-4 animate-spin" />
-            <span>Regenerating...</span>
-          </div>
+          <LoadingChip message="Regenerating..." />
         </div>
       )}
 
diff --git a/src/components/GenerateGuide/GenerateAIGuide.tsx b/src/components/GenerateGuide/GenerateAIGuide.tsx
index 8d511a33f..64ed875a0 100644
--- a/src/components/GenerateGuide/GenerateAIGuide.tsx
+++ b/src/components/GenerateGuide/GenerateAIGuide.tsx
@@ -4,9 +4,9 @@ import { getCourseFineTuneData } from '../../lib/ai';
 import { getUrlParams } from '../../lib/browser';
 import { isLoggedIn } from '../../lib/jwt';
 import { AIGuideContent } from './AIGuideContent';
-import { Loader2Icon } from 'lucide-react';
 import { queryClient } from '../../stores/query-client';
 import { getAiGuideOptions } from '../../queries/ai-guide';
+import { LoadingChip } from '../LoadingChip';
 
 type GenerateAIGuideProps = {
   onGuideSlugChange?: (guideSlug: string) => void;
@@ -133,7 +133,7 @@ export function GenerateAIGuide(props: GenerateAIGuideProps) {
   if (isLoading) {
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <Loader2Icon className="size-6 animate-spin" />
+        <LoadingChip message="Please wait..." />
       </div>
     );
   }
diff --git a/src/components/LoadingChip.tsx b/src/components/LoadingChip.tsx
new file mode 100644
index 000000000..cb194df3c
--- /dev/null
+++ b/src/components/LoadingChip.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react';
+
+type LoadingChipProps = {
+  message?: string;
+};
+
+export function LoadingChip(props: LoadingChipProps) {
+  const { message = 'Please wait...' } = props;
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border bg-white py-2 pr-4 pl-3 text-sm">
+      <Loader2Icon className="size-4 animate-spin text-gray-400" />
+      <span>{message}</span>
+    </div>
+  );
+}