From 7b392a4be3559b7c75806c89ab89983f0272be77 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Tue, 23 Apr 2024 21:35:47 +0100
Subject: [PATCH] add loading icon when clicking save

---
 package.json             |  1 +
 pnpm-lock.yaml           | 11 +++++++++++
 src/app/(pages)/page.tsx | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 539dff9..f26f77a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@types/react-syntax-highlighter": "^15.5.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7770cf1..d5e2feb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@heroicons/react':
+    specifier: ^2.1.3
+    version: 2.1.3(react@18.2.0)
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.79)(react@18.2.0)
@@ -134,6 +137,14 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@heroicons/react@2.1.3(react@18.2.0):
+    resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx
index 1ac271a..688d3f6 100644
--- a/src/app/(pages)/page.tsx
+++ b/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>