feat: enhance download functionality with loading state and API integration

Author: andrii-harbour

.github/workflows/deploy-demo.yml

@@ -42,6 +42,8 @@ jobs:
           cache: "pnpm"
 
       - name: Install and Build
+        env:
+          VITE_API_BASE_URL: https://esign-demo-proxy-server-191591660773.us-central1.run.app
         run: |
           pnpm install
           rm -rf dist

demo/src/App.tsx

@@ -11,6 +11,8 @@ import CustomSignature from './CustomSignature';
 import 'superdoc/style.css';
 import './App.css';
 
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
+
 const documentSource =
   'https://storage.googleapis.com/public_static_hosting/public_demo_docs/service_agreement_updated.docx';
 
@@ -91,7 +93,7 @@ export function App() {
     console.log('Submit data:', data);
 
     try {
-      const response = await fetch('/v1/sign', {
+      const response = await fetch(`${API_BASE_URL}/v1/sign`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -132,7 +134,7 @@ export function App() {
         return;
       }
 
-      const response = await fetch('/v1/download', {
+      const response = await fetch(`${API_BASE_URL}/v1/download`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({

src/defaults/DownloadButton.tsx

@@ -2,27 +2,39 @@ import React from 'react';
 import type { DownloadButtonProps, DownloadConfig } from '../types';
 
 export const createDownloadButton = (config?: DownloadConfig) => {
-  const Component: React.FC<DownloadButtonProps> = ({ onClick, fileName, isDisabled }) => {
+  const Component: React.FC<DownloadButtonProps> = ({
+    onClick,
+    fileName,
+    isDisabled,
+    isDownloading,
+  }) => {
     const label = config?.label || 'Download';
+    const disabled = isDisabled || isDownloading;
 
     return (
       <button
         onClick={onClick}
-        disabled={isDisabled}
-        className={`superdoc-esign-btn superdoc-esign-btn--download`}
+        disabled={disabled}
+        className={`superdoc-esign-btn superdoc-esign-btn--download${isDownloading ? ' superdoc-esign-btn--loading' : ''}`}
         style={{
           padding: '8px 16px',
           borderRadius: '6px',
           border: '1px solid #d0d5dd',
           background: '#ffffff',
           color: '#333',
-          cursor: isDisabled ? 'not-allowed' : 'pointer',
-          opacity: isDisabled ? 0.5 : 1,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled ? 0.7 : 1,
           fontSize: '16px',
           fontWeight: 'bold',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'opacity 0.2s ease',
         }}
       >
-        {label} {fileName && `(${fileName})`}
+        {isDownloading && <span className="superdoc-esign-spinner" />}
+        {isDownloading ? 'Downloading...' : label}
+        {!isDownloading && fileName && ` (${fileName})`}
       </button>
     );
   };

src/defaults/SubmitButton.tsx

@@ -8,28 +8,32 @@ export const createSubmitButton = (config?: SubmitConfig) => {
     isDisabled,
     isSubmitting,
   }) => {
-    const getLabel = () => {
-      return config?.label || 'Submit';
-    };
+    const label = config?.label || 'Submit';
+    const disabled = !isValid || isDisabled || isSubmitting;
 
     return (
       <button
         onClick={onClick}
-        disabled={!isValid || isDisabled || isSubmitting}
-        className={`superdoc-esign-btn superdoc-esign-btn--submit`}
+        disabled={disabled}
+        className={`superdoc-esign-btn superdoc-esign-btn--submit${isSubmitting ? ' superdoc-esign-btn--loading' : ''}`}
         style={{
           padding: '12px 24px',
           borderRadius: '6px',
           border: 'none',
           background: '#007bff',
           color: '#fff',
-          cursor: !isValid || isDisabled ? 'not-allowed' : 'pointer',
-          opacity: !isValid || isDisabled ? 0.5 : 1,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled && !isSubmitting ? 0.5 : 1,
           fontSize: '16px',
           fontWeight: 'bold',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'opacity 0.2s ease',
         }}
       >
-        {getLabel()}
+        {isSubmitting && <span className="superdoc-esign-spinner superdoc-esign-spinner--light" />}
+        {isSubmitting ? 'Submitting...' : label}
       </button>
     );
   };

src/index.tsx

@@ -36,6 +36,7 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
     const [fieldValues, setFieldValues] = useState<Map<string, Types.FieldValue>>(new Map());
     const [isValid, setIsValid] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isDownloading, setIsDownloading] = useState(false);
     const [auditTrail, setAuditTrail] = useState<Types.AuditEvent[]>([]);
     const [isReady, setIsReady] = useState(false);
 
@@ -298,7 +299,9 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
     }, [scrolled, fieldValues, isSubmitting, checkIsValid, onStateChange]);
 
     const handleDownload = useCallback(async () => {
-      if (isDisabled) return;
+      if (isDisabled || isDownloading) return;
+
+      setIsDownloading(true);
 
       const downloadData: Types.DownloadData = {
         eventId,
@@ -313,8 +316,21 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
         fileName: download?.fileName || 'document.pdf',
       };
 
-      await onDownload?.(downloadData);
-    }, [isDisabled, eventId, document.source, fields, fieldValues, download, onDownload]);
+      try {
+        await onDownload?.(downloadData);
+      } finally {
+        setIsDownloading(false);
+      }
+    }, [
+      isDisabled,
+      isDownloading,
+      eventId,
+      document.source,
+      fields,
+      fieldValues,
+      download,
+      onDownload,
+    ]);
 
     const handleSubmit = useCallback(async () => {
       if (!isValid || isDisabled || isSubmitting) return;
@@ -378,6 +394,7 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
           onClick={handleDownload}
           fileName={download?.fileName}
           isDisabled={isDisabled}
+          isDownloading={isDownloading}
         />
       );
     };

src/styles.css

@@ -49,3 +49,29 @@
   display: flex;
   gap: 10px;
 }
+
+/* Button loading state */
+.superdoc-esign-btn--loading {
+  position: relative;
+}
+
+/* Spinner */
+.superdoc-esign-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #d0d5dd;
+  border-top-color: #333;
+  border-radius: 50%;
+  animation: superdoc-esign-spin 0.8s linear infinite;
+}
+
+.superdoc-esign-spinner--light {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+}
+
+@keyframes superdoc-esign-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/types.ts

@@ -33,6 +33,7 @@ export interface DownloadButtonProps {
   onClick: () => void;
   fileName?: string;
   isDisabled: boolean;
+  isDownloading: boolean;
 }
 
 export interface SubmitButtonProps {