diff --git a/src/app/due-considerations/page.tsx b/src/app/due-considerations/page.tsx index 68b0234..d566784 100644 --- a/src/app/due-considerations/page.tsx +++ b/src/app/due-considerations/page.tsx @@ -7,6 +7,12 @@ import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import { useMutation } from "@tanstack/react-query"; +const Spinner = () => { + return ( +
+ ); +}; + function generateDueConsiderationsS3Folder(userId: string) { const timestamp = new Date().toISOString().replace(/[:.-]/g, ""); const key = `${userId}/${timestamp}/`; @@ -224,16 +230,26 @@ export default function DueConsiderationsHome() {
{uploadMessage}
- {downloadUrl ? ( - Download Due Considerations - ) : null} +
+ {isGeneratingUrlLoading || isUploadLoading ? ( + + ) : downloadUrl ? ( + + Download Due Considerations + + ) : null} +
); diff --git a/src/app/globals.css b/src/app/globals.css index 6888ffc..4df84e1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -97,3 +97,17 @@ body { font-feature-settings: "rlig" 1, "calt" 1; } } + +/* These styles are for the loading spinner on the due considerations page*/ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +}