From 9235e9a6fbb364713105137b6bf5bba9d81ecd4c Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 16 Feb 2024 21:26:24 +0000
Subject: ui: Change action buttons to show a spinner when the request is
 loading

---
 .../dashboard/settings/components/AddApiKey.tsx    | 28 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

(limited to 'packages/web/app/dashboard/settings/components/AddApiKey.tsx')

diff --git a/packages/web/app/dashboard/settings/components/AddApiKey.tsx b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
index c438f4b1..27111b87 100644
--- a/packages/web/app/dashboard/settings/components/AddApiKey.tsx
+++ b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
@@ -29,9 +29,19 @@ import { useForm, SubmitErrorHandler } from "react-hook-form";
 import { toast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
 import { useState } from "react";
-import { Copy } from "lucide-react";
+import { Check, Copy } from "lucide-react";
+import LoadingSpinner from "@/components/ui/spinner";
+import { ActionButton } from "@/components/ui/action-button";
 
 function ApiKeySuccess({ apiKey }: { apiKey: string }) {
+  const [isCopied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    navigator.clipboard.writeText(apiKey);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <div>
       <div className="py-4">
@@ -40,8 +50,12 @@ function ApiKeySuccess({ apiKey }: { apiKey: string }) {
       </div>
       <div className="flex space-x-2 pt-2">
         <Input value={apiKey} readOnly />
-        <Button onClick={() => navigator.clipboard.writeText(apiKey)}>
-          <Copy className="size-4" />
+        <Button onClick={onCopy}>
+          {!isCopied ? (
+            <Copy className="size-4" />
+          ) : (
+            <Check className="size-4" />
+          )}
         </Button>
       </div>
     </div>
@@ -104,9 +118,13 @@ function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
             );
           }}
         />
-        <Button className="h-full" type="submit">
+        <ActionButton
+          className="h-full"
+          type="submit"
+          loading={mutator.isPending}
+        >
           Create
-        </Button>
+        </ActionButton>
       </form>
     </Form>
   );
-- 
cgit v1.2.3-70-g09d2