Merge pull request #6

Indicate loading state in PDF download button

src/components/Button/ButtonLink.tsx

@@ -1,6 +1,7 @@
 import {
   AnchorHTMLAttributes,
   DetailedHTMLProps,
+  MouseEventHandler,
   PropsWithChildren,
 } from 'react';
 
@@ -17,18 +18,23 @@ const sizeVariants = {
 
 interface ButtonLinkProps extends HTMLAnchorProps {
   size?: keyof typeof sizeVariants;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  className?: string;
 }
 
 const ButtonLink: React.FC<PropsWithChildren<ButtonLinkProps>> = ({
   children,
   size = 'md',
+  className,
+  onClick,
   ...rest
 }) => {
   const sizeClasses = sizeVariants[size];
 
   return (
     <a
-      className={`rounded-md border-2 border-accent-light-7 bg-accent-light-1 font-medium text-accent-light-11 no-underline outline-none transition hover:border-accent-light-8 focus:border-transparent focus:bg-accent-light-10 focus:text-accent-light-contrast focus:ring-4 focus:ring-accent-light-transparent hover:focus:border-transparent dark:border-accent-dark-7 dark:bg-accent-dark-1 dark:text-accent-dark-11 dark:hover:border-accent-dark-8 focus:dark:ring-accent-dark-transparent ${sizeClasses}`}
+      onClick={onClick}
+      className={`${className} rounded-md border-2 border-accent-light-7 bg-accent-light-1 font-medium text-accent-light-11 no-underline outline-none transition hover:border-accent-light-8 focus:border-transparent focus:bg-accent-light-10 focus:text-accent-light-contrast focus:ring-4 focus:ring-accent-light-transparent hover:focus:border-transparent dark:border-accent-dark-7 dark:bg-accent-dark-1 dark:text-accent-dark-11 dark:hover:border-accent-dark-8 focus:dark:ring-accent-dark-transparent ${sizeClasses}`}
       {...rest}
     >
       {children}

src/components/PDF/PDFDownloadButton.tsx

@@ -1,20 +1,33 @@
-import { faFilePdf } from '@fortawesome/free-solid-svg-icons';
+'use client';
+import { faFilePdf, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useState } from 'react';
 import ButtonLink from '../Button/ButtonLink';
 
 interface PDFDownloadButtonProps {
   secret?: string;
 }
 
 const PDFDownloadButton: React.FC<PDFDownloadButtonProps> = ({ secret }) => {
+  const [loading, setLoading] = useState(false);
   return (
     <ButtonLink
       href={secret ? `/api/pdf?secret=${secret}` : '/api/pdf'}
       size="lg"
+      className="relative"
+      onClick={() => {
+        setLoading(true);
+      }}
     >
-      <FontAwesomeIcon className="mr-2" icon={faFilePdf} size="lg" />
-      View or Download PDF
+      {loading && (
+        <span className="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2">
+          <FontAwesomeIcon icon={faSpinner} spin />
+        </span>
+      )}
+      <span className={loading ? 'invisible' : ''}>
+        <FontAwesomeIcon className="mr-2" icon={faFilePdf} size="lg" />
+        View or Download PDF
+      </span>
     </ButtonLink>
   );
 };