add loading icon when clicking save

src/app/(pages)/page.tsx

@@ -4,10 +4,12 @@ import { ReactElement, useState } from "react";
 import { ActionMenu } from "@/app/components/action-menu";
 import { Button } from "@/app/components/ui/button";
 import { useToast } from "@/app/components/ui/use-toast";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
 
 export default function Home(): ReactElement {
   const { toast } = useToast();
   const [value, setValue] = useState("");
+  const [creating, setCreating] = useState(false);
 
   /**
    * Uploads the paste to the server.
@@ -18,6 +20,7 @@ export default function Home(): ReactElement {
       return;
     }
 
+    setCreating(true);
     // Upload the paste to the server
     const response = await fetch(
       `${process.env.NEXT_PUBLIC_API_ENDPOINT}/upload`,
@@ -37,6 +40,7 @@ export default function Home(): ReactElement {
         title: "Paste",
         description: data.message,
       });
+      setCreating(false);
       return;
     }
 
@@ -58,7 +62,14 @@ export default function Home(): ReactElement {
 
       <div className="absolute top-0 right-0 mx-3 mt-2">
         <ActionMenu>
-          <Button onClick={() => createPaste()}>Save</Button>
+          <Button onClick={() => createPaste()} className="flex gap-1">
+            {creating && (
+              <div className="animate-spin">
+                <ArrowPathIcon width={16} height={16} />
+              </div>
+            )}
+            Save
+          </Button>
         </ActionMenu>
       </div>
     </div>