Loading chip refactor

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

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

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