add loading icon when clicking save
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m38s
Publish Docker Image / docker (ubuntu-latest) (push) Successful in 1m32s

This commit is contained in:
Lee 2024-04-23 21:35:47 +01:00
parent b22c5e7e50
commit 7b392a4be3
3 changed files with 24 additions and 1 deletions

@ -9,6 +9,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@heroicons/react": "^2.1.3",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toast": "^1.1.5",
"@types/react-syntax-highlighter": "^15.5.11", "@types/react-syntax-highlighter": "^15.5.11",

11
pnpm-lock.yaml generated

@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
dependencies: dependencies:
'@heroicons/react':
specifier: ^2.1.3
version: 2.1.3(react@18.2.0)
'@radix-ui/react-slot': '@radix-ui/react-slot':
specifier: ^1.0.2 specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.79)(react@18.2.0) 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} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true 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: /@humanwhocodes/config-array@0.11.14:
resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
engines: {node: '>=10.10.0'} engines: {node: '>=10.10.0'}

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