From 4fe63123a304ac19e6964864d922c26bfea6b237 Mon Sep 17 00:00:00 2001
From: Ben Reinhart <benjreinhart@gmail.com>
Date: Tue, 23 Jul 2024 18:38:43 -0700
Subject: [PATCH] Use same loading state pattern (#156)

---
 packages/web/src/components/cells/code.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/cells/code.tsx b/packages/web/src/components/cells/code.tsx
index a6df42fb..c3cbb005 100644
--- a/packages/web/src/components/cells/code.tsx
+++ b/packages/web/src/components/cells/code.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import CodeMirror, { keymap, Prec } from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { Circle, Info, Play, Trash2, Sparkles, X, MessageCircleWarning } from 'lucide-react';
+import { Info, Play, Trash2, Sparkles, X, MessageCircleWarning, LoaderCircle } from 'lucide-react';
 import TextareaAutosize from 'react-textarea-autosize';
 import AiGenerateTipsDialog from '@/components/ai-generate-tips-dialog';
 import {
@@ -231,15 +231,21 @@ export default function CodeCell(props: {
               </Button>
             )}
             {promptMode === 'generating' && (
-              <Button variant="run" className="disabled:opacity-100" disabled tabIndex={1}>
-                Generating
+              <Button
+                variant="run"
+                size="default-with-icon"
+                className="disabled:opacity-100"
+                disabled
+                tabIndex={1}
+              >
+                <LoaderCircle size={16} className="animate-spin" /> Generating
               </Button>
             )}
             {promptMode === 'off' && (
               <>
                 {cell.status === 'running' && (
                   <Button variant="run" size="default-with-icon" onClick={stopCell} tabIndex={1}>
-                    <Circle size={16} /> Stop
+                    <LoaderCircle size={16} className="animate-spin" /> Stop
                   </Button>
                 )}
                 {cell.status === 'idle' && (