@dmsi/wedgekit-react 0.0.159 → 0.0.160

package/dist/components/PDFViewer.js

@@ -1,24 +1,27 @@
 "use client";
 import {
   Modal
-} from "../chunk-NRCUFAOZ.js";
+} from "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
 import "../chunk-R7ELP5C5.js";
 import "../chunk-ZFOANBWG.js";
+import {
+  Spinner
+} from "../chunk-PLMGI5K5.js";
 import "../chunk-AZ7LVLOK.js";
-import "../chunk-4T7F5BZZ.js";
 import {
   Caption
 } from "../chunk-E7D24OHM.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-4T7F5BZZ.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
@@ -36,8 +39,13 @@ function PDFViewer(props) {
   const handleDownload = useCallback(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
-    link.href = `data:application/pdf;base64,${encodedPdfs[currentIndex].base64}`;
-    link.download = encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf`;
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -52,14 +60,22 @@ function PDFViewer(props) {
       onClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ jsx(DownloadIcon, { testid: testid ? `${testid}-download-icon` : void 0, onClick: handleDownload, isDownloading }),
+      headerIcon: /* @__PURE__ */ jsx(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ),
       children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
         /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        /* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsxs(
           Button,
           {
             testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
             variant: index === currentIndex ? "primary" : "secondary",
+            classNameLabel: "items-center flex flex-row gap-2",
             onClick: (e) => {
               setCurrentIndex(index);
               requestAnimationFrame(() => {
@@ -71,8 +87,11 @@ function PDFViewer(props) {
                 });
               });
             },
-            disabled: isDownloading || currentIndex === index,
-            children: pdf.fileName
+            disabled: isDownloading || currentIndex === index || !pdf.base64,
+            children: [
+              !pdf.base64 && /* @__PURE__ */ jsx(Spinner, {}),
+              pdf.fileName
+            ]
           },
           `${pdf.fileName}-${index}`
         )) })
@@ -107,35 +126,70 @@ function PDFElement({ b64, testid }) {
     scale: 1
   });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ jsx("canvas", { "data-testid": testid ? `${testid}-pdf-content` : void 0, ref: canvasRef }) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", "data-testid": testid ? `${testid}-pdf-pagination` : void 0, children: [
-      /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
-          disabled: page === 1,
-          onClick: () => setPage(page - 1),
-          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-          children: /* @__PURE__ */ jsx(Caption, { children: "Previous" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("li", { "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0, className: "text-label-desktop text-text-on-action-primary-normal", children: [
-        "Page ",
-        /* @__PURE__ */ jsx("span", { "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0, children: page }),
-        " of ",
-        /* @__PURE__ */ jsx("span", { "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0, children: pdfDocument.numPages })
-      ] }),
-      /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
-          disabled: page === pdfDocument.numPages,
-          onClick: () => setPage(page + 1),
-          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-          children: /* @__PURE__ */ jsx(Caption, { children: "Next" })
-        }
-      ) })
-    ] })
+    pdfDocument ? /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        "data-testid": testid ? `${testid}-pdf-content` : void 0,
+        ref: canvasRef
+      }
+    ) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
+    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        className: "flex flex-row justify-between items-center",
+        "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
+        children: [
+          /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
+              disabled: page === 1,
+              onClick: () => setPage(page - 1),
+              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+              children: /* @__PURE__ */ jsx(Caption, { children: "Previous" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
+              className: "text-label-desktop text-text-on-action-primary-normal",
+              children: [
+                "Page",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
+                    children: page
+                  }
+                ),
+                " ",
+                "of",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
+                    children: pdfDocument.numPages
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
+              disabled: page === pdfDocument.numPages,
+              onClick: () => setPage(page + 1),
+              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+              children: /* @__PURE__ */ jsx(Caption, { children: "Next" })
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/components/Password.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/PaymentOnAccountModal.cjs

@@ -1964,7 +1964,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(

package/dist/components/PaymentOnAccountModal.js

@@ -1,31 +1,31 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} from "../chunk-N7EKJEYO.js";
-import "../chunk-QFSGM4MP.js";
+} from "../chunk-RUTYNLKS.js";
+import "../chunk-NT2ZKA4W.js";
 import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
-import "../chunk-NRCUFAOZ.js";
+import "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
 import "../chunk-R7ELP5C5.js";
 import "../chunk-ZFOANBWG.js";
-import "../chunk-GG5JOFS6.js";
+import "../chunk-PLMGI5K5.js";
 import "../chunk-AZ7LVLOK.js";
 import "../chunk-EPQLWHCL.js";
-import "../chunk-4T7F5BZZ.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
 import "../chunk-WFQEE2OO.js";
-import "../chunk-FKMKHLQH.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-4T7F5BZZ.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-CYZL57LH.js";
 import "../chunk-WSS2DFTP.js";
 import "../chunk-N6JVLYEE.js";
 import "../chunk-4LXG6QNT.js";
 import "../chunk-HVI3CL7Y.js";
+import "../chunk-FKMKHLQH.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Search.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-PMBEIP24.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Select.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-XH65MD2C.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -1020,7 +1020,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(

package/dist/components/SelectPaymentMethod.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-QFSGM4MP.js";
+} from "../chunk-NT2ZKA4W.js";
 import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
-import "../chunk-GG5JOFS6.js";
+import "../chunk-PLMGI5K5.js";
 import "../chunk-EPQLWHCL.js";
 import "../chunk-WFQEE2OO.js";
-import "../chunk-FKMKHLQH.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-CYZL57LH.js";
 import "../chunk-WSS2DFTP.js";
 import "../chunk-N6JVLYEE.js";
 import "../chunk-4LXG6QNT.js";
 import "../chunk-HVI3CL7Y.js";
+import "../chunk-FKMKHLQH.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Spinner.cjs

@@ -35,7 +35,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/Spinner.js

@@ -1,6 +1,6 @@
 import {
   Spinner
-} from "../chunk-GG5JOFS6.js";
+} from "../chunk-PLMGI5K5.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Spinner

package/dist/components/Stepper.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
+} from "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-JWCT72WR.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
-import "../chunk-5UH6QUFB.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Time.js

@@ -3,9 +3,9 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";

package/dist/components/Toast.js

@@ -2,12 +2,12 @@
 import {
   Heading3
 } from "../chunk-AZ7LVLOK.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Upload.js

@@ -1,9 +1,9 @@
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/index.cjs

@@ -4564,7 +4564,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(

package/dist/components/index.js

@@ -1,58 +1,55 @@
 import {
   Tooltip
 } from "../chunk-4VTOTNKJ.js";
-import {
-  PaymentOnAccountModal
-} from "../chunk-N7EKJEYO.js";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
-import "../chunk-QFSGM4MP.js";
+} from "../chunk-XH65MD2C.js";
+import {
+  PaymentOnAccountModal
+} from "../chunk-RUTYNLKS.js";
+import "../chunk-NT2ZKA4W.js";
 import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
-import "../chunk-NRCUFAOZ.js";
+import "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
 import "../chunk-R7ELP5C5.js";
 import "../chunk-ZFOANBWG.js";
-import "../chunk-GG5JOFS6.js";
+import "../chunk-PLMGI5K5.js";
 import "../chunk-AZ7LVLOK.js";
 import "../chunk-EPQLWHCL.js";
+import {
+  Checkbox
+} from "../chunk-WFQEE2OO.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-WJ447JB5.js";
+} from "../chunk-4NCDT5ZY.js";
 import {
   Menu
-} from "../chunk-LPARJM6S.js";
+} from "../chunk-YR7JUKYO.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "../chunk-AEDEFN7A.js";
-import "../chunk-WVUIIBRR.js";
+} from "../chunk-FFU6FB3K.js";
+import {
+  useInfiniteScroll
+} from "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
+} from "../chunk-PMBEIP24.js";
 import {
   Input
-} from "../chunk-MVGOAMTP.js";
+} from "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-JWCT72WR.js";
-import {
-  Checkbox
-} from "../chunk-WFQEE2OO.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
-import {
-  useInfiniteScroll
-} from "../chunk-WNQ53SVY.js";
-import "../chunk-5UH6QUFB.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
 } from "../chunk-CYZL57LH.js";
@@ -66,6 +63,9 @@ import {
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.159",
+  "version": "0.0.160",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/PDFViewer.tsx

@@ -7,6 +7,7 @@ import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { Stack } from "./Stack";
 import { Caption } from "./Caption";
+import { Spinner } from "./Spinner";
 
 type PDFViewerProps = {
   isOpen: boolean;
@@ -24,12 +25,15 @@ export function PDFViewer(props: PDFViewerProps) {
   const handleDownload = useCallback(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
-    link.href = `data:application/pdf;base64,${
-      encodedPdfs[currentIndex].base64
-    }`;
-    link.download = encodedPdfs[currentIndex].fileName.endsWith(".pdf")
-      ? encodedPdfs[currentIndex].fileName
-      : `${encodedPdfs[currentIndex].fileName}.pdf`;
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf")
+      ? currentPdf.fileName
+      : `${currentPdf.fileName}.pdf`;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -46,7 +50,11 @@ export function PDFViewer(props: PDFViewerProps) {
       showButtons={!!customActions}
       customActions={customActions}
       headerIcon={
-        <DownloadIcon testid={testid ? `${testid}-download-icon` : undefined} onClick={handleDownload} isDownloading={isDownloading} />
+        <DownloadIcon
+          testid={testid ? `${testid}-download-icon` : undefined}
+          onClick={handleDownload}
+          isDownloading={isDownloading}
+        />
       }
     >
       <Stack sizing="layout">
@@ -57,6 +65,7 @@ export function PDFViewer(props: PDFViewerProps) {
               testid={testid ? `${testid}-${pdf.fileName}-button` : undefined}
               variant={index === currentIndex ? "primary" : "secondary"}
               key={`${pdf.fileName}-${index}`}
+              classNameLabel="items-center flex flex-row gap-2"
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                 setCurrentIndex(index);
 
@@ -66,12 +75,13 @@ export function PDFViewer(props: PDFViewerProps) {
                   button.scrollIntoView({
                     behavior: "smooth",
                     block: "nearest",
-                    inline: "center"
+                    inline: "center",
                   });
                 });
               }}
-              disabled={isDownloading || currentIndex === index}
+              disabled={isDownloading || currentIndex === index || !pdf.base64}
             >
+              {!pdf.base64 && <Spinner />}
               {pdf.fileName}
             </Button>
           ))}
@@ -84,7 +94,7 @@ export function PDFViewer(props: PDFViewerProps) {
 function DownloadIcon({
   onClick,
   isDownloading,
-  testid
+  testid,
 }: {
   onClick: () => void;
   isDownloading?: boolean;
@@ -101,7 +111,7 @@ function DownloadIcon({
   );
 }
 
-function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
+function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
   const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
 
@@ -115,12 +125,26 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
 
   return (
     <div className="flex flex-col space-y-4">
-      {pdfDocument ? <canvas data-testid={testid ? `${testid}-pdf-content` : undefined} ref={canvasRef} /> : <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>Loading PDF...</div>}
+      {pdfDocument ? (
+        <canvas
+          data-testid={testid ? `${testid}-pdf-content` : undefined}
+          ref={canvasRef}
+        />
+      ) : (
+        <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>
+          Loading PDF...
+        </div>
+      )}
       {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
-        <ul className="flex flex-row justify-between items-center" data-testid={testid ? `${testid}-pdf-pagination` : undefined}>
+        <ul
+          className="flex flex-row justify-between items-center"
+          data-testid={testid ? `${testid}-pdf-pagination` : undefined}
+        >
           <li className="previous">
             <button
-              data-testid={testid ? `${testid}-pdf-pagination-previous-button` : undefined}
+              data-testid={
+                testid ? `${testid}-pdf-pagination-previous-button` : undefined
+              }
               disabled={page === 1}
               onClick={() => setPage(page - 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "
@@ -128,12 +152,34 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
               <Caption>Previous</Caption>
             </button>
           </li>
-          <li data-testid={testid ? `${testid}-pdf-pagination-text` : undefined} className="text-label-desktop text-text-on-action-primary-normal">
-            Page <span data-testid={testid ? `${testid}-pdf-pagination-page-${page}` : undefined}>{page}</span> of <span data-testid={testid ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}` : undefined}>{pdfDocument!.numPages}</span>
+          <li
+            data-testid={testid ? `${testid}-pdf-pagination-text` : undefined}
+            className="text-label-desktop text-text-on-action-primary-normal"
+          >
+            Page{" "}
+            <span
+              data-testid={
+                testid ? `${testid}-pdf-pagination-page-${page}` : undefined
+              }
+            >
+              {page}
+            </span>{" "}
+            of{" "}
+            <span
+              data-testid={
+                testid
+                  ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}`
+                  : undefined
+              }
+            >
+              {pdfDocument!.numPages}
+            </span>
           </li>
           <li className="next">
             <button
-              data-testid={testid ? `${testid}-pdf-pagination-next-button` : undefined}
+              data-testid={
+                testid ? `${testid}-pdf-pagination-next-button` : undefined
+              }
               disabled={page === pdfDocument!.numPages}
               onClick={() => setPage(page + 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "