add loading icon when clicking save
This commit is contained in:
parent
b22c5e7e50
commit
7b392a4be3
@ -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
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>
|
||||||
|
Reference in New Issue
Block a user