@verdocs/web-sdk 4.2.132 → 4.2.135

package/dist/cjs/verdocs-preview_9.cjs.entry.js

@@ -8,8 +8,8 @@ const TemplateFieldStore = require('./TemplateFieldStore-836d8bf5.js');
 const TemplateRoleStore = require('./TemplateRoleStore-fe871897.js');
 const TemplateStore = require('./TemplateStore-d11d62c0.js');
 const errors = require('./errors-017fb835.js');
-const Icons = require('./Icons-9a6f2f7c.js');
 const Toast = require('./Toast-d84d7bd3.js');
+const Icons = require('./Icons-9a6f2f7c.js');
 const format = require('./format-dc0f3757.js');
 const interact_min = require('./interact.min-e6956f8b.js');
 const utils = require('./utils-5accd019.js');
@@ -262,7 +262,7 @@ const VerdocsSend = class {
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
+            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
             environment: this.environment,
             // TODO: Make optional in the SDK
             initial_reminder: 0,
@@ -274,19 +274,19 @@ const VerdocsSend = class {
         console.log('[SEND] Creating envelope', details);
         jsSdk.createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
         })
             .catch(e => {
-            var _a;
+            var _a, _b, _c;
             console.log('Send error', e);
-            // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
+            Toast.VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || 'Error creating envelope, please try again later.');
             this.sending = false;
-            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+            (_c = this.sendingEnvelope) === null || _c === void 0 ? void 0 : _c.emit({ sending: false });
         });
     }
     handleCancel(e) {

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -265,11 +265,17 @@ const VerdocsSign = class {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return jsSdk.createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await jsSdk.updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
+                })
+                    .catch(e => {
+                    console.log('Error updating initials', e);
+                    this.showSpinner = false;
                 });
             case 'signature':
                 // This can be caused by a focus-out event if the user clicks the field
@@ -278,15 +284,18 @@ const VerdocsSign = class {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
                 return jsSdk.createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await jsSdk.updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
                 })
                     .catch(e => {
                     console.warn('[SIGN] Error updating signature', e);
+                    this.showSpinner = false;
                 });
             case 'date':
                 const { formattedDate } = e.detail;
@@ -366,16 +375,17 @@ const VerdocsSign = class {
                     this.envelope = envelope;
                     // The show-done dialog does this
                     // this.isDone = true;
+                    this.submitting = false;
                 })
                     .catch(e => {
                     // this.isDone = true;
                     console.log('[SIGN] Error reloading envelope', e);
+                    this.submitting = false;
                 });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
             }
-            this.submitting = false;
             return;
         }
         // Find and focus the next incomplete field (that is fillable)
@@ -451,7 +461,6 @@ const VerdocsSign = class {
             }
         });
         el.addEventListener('attached', async (e) => {
-            // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
             this.showSpinner = true;
             try {
@@ -514,7 +523,6 @@ const VerdocsSign = class {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            // TODO: Review possible workflow/race conditions vs rendering in -document-page.
             const el = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -624,7 +632,8 @@ const VerdocsSign = class {
                 e.stopPropagation();
                 // We don't allow this to be hidden
                 // this.showDeclined = false;
-            } })), this.submitting && (index.h("div", { class: "loading-indicator" }, index.h("verdocs-loader", null))), this.showSpinner && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null))))));
+            } })), this.submitting ||
+            (this.showSpinner && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null)))))));
     }
 };
 VerdocsSign.style = VerdocsSignStyle0;

package/dist/collection/components/embeds/verdocs-send/verdocs-send.js

@@ -3,6 +3,7 @@ import { createEnvelope, getOrganizationContacts, getRGBA, isValidEmail, isValid
 import { getRoleIndex, getRoleNames, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
+import { VerdocsToast } from "../../../utils/Toast";
 const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
@@ -174,7 +175,7 @@ export class VerdocsSend {
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
+            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
             environment: this.environment,
             // TODO: Make optional in the SDK
             initial_reminder: 0,
@@ -186,19 +187,19 @@ export class VerdocsSend {
         console.log('[SEND] Creating envelope', details);
         createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
         })
             .catch(e => {
-            var _a;
+            var _a, _b, _c;
             console.log('Send error', e);
-            // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
+            VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || 'Error creating envelope, please try again later.');
             this.sending = false;
-            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+            (_c = this.sendingEnvelope) === null || _c === void 0 ? void 0 : _c.emit({ sending: false });
         });
     }
     handleCancel(e) {

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -269,11 +269,17 @@ export class VerdocsSign {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
+                })
+                    .catch(e => {
+                    console.log('Error updating initials', e);
+                    this.showSpinner = false;
                 });
             case 'signature':
                 // This can be caused by a focus-out event if the user clicks the field
@@ -282,15 +288,18 @@ export class VerdocsSign {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
                 return createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
                 })
                     .catch(e => {
                     console.warn('[SIGN] Error updating signature', e);
+                    this.showSpinner = false;
                 });
             case 'date':
                 const { formattedDate } = e.detail;
@@ -370,16 +379,17 @@ export class VerdocsSign {
                     this.envelope = envelope;
                     // The show-done dialog does this
                     // this.isDone = true;
+                    this.submitting = false;
                 })
                     .catch(e => {
                     // this.isDone = true;
                     console.log('[SIGN] Error reloading envelope', e);
+                    this.submitting = false;
                 });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
             }
-            this.submitting = false;
             return;
         }
         // Find and focus the next incomplete field (that is fillable)
@@ -455,7 +465,6 @@ export class VerdocsSign {
             }
         });
         el.addEventListener('attached', async (e) => {
-            // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
             this.showSpinner = true;
             try {
@@ -518,7 +527,6 @@ export class VerdocsSign {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            // TODO: Review possible workflow/race conditions vs rendering in -document-page.
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -628,7 +636,8 @@ export class VerdocsSign {
                 e.stopPropagation();
                 // We don't allow this to be hidden
                 // this.showDeclined = false;
-            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null))))));
+            } })), this.submitting ||
+            (this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))))));
     }
     static get is() { return "verdocs-sign"; }
     static get originalStyleUrls() {

package/dist/components/verdocs-send2.js

@@ -3,6 +3,7 @@ import { VerdocsEndpoint, getOrganizationContacts, createEnvelope, isValidEmail,
 import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
+import { V as VerdocsToast } from './Toast.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$6 } from './verdocs-contact-picker2.js';
@@ -176,7 +177,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
+            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
             environment: this.environment,
             // TODO: Make optional in the SDK
             initial_reminder: 0,
@@ -188,19 +189,19 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         console.log('[SEND] Creating envelope', details);
         createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
         })
             .catch(e => {
-            var _a;
+            var _a, _b, _c;
             console.log('Send error', e);
-            // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
+            VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || 'Error creating envelope, please try again later.');
             this.sending = false;
-            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+            (_c = this.sendingEnvelope) === null || _c === void 0 ? void 0 : _c.emit({ sending: false });
         });
     }
     handleCancel(e) {

package/dist/components/verdocs-sign.js

@@ -268,11 +268,17 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
+                })
+                    .catch(e => {
+                    console.log('Error updating initials', e);
+                    this.showSpinner = false;
                 });
             case 'signature':
                 // This can be caused by a focus-out event if the user clicks the field
@@ -281,15 +287,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
                 return createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
                 })
                     .catch(e => {
                     console.warn('[SIGN] Error updating signature', e);
+                    this.showSpinner = false;
                 });
             case 'date':
                 const { formattedDate } = e.detail;
@@ -369,16 +378,17 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     this.envelope = envelope;
                     // The show-done dialog does this
                     // this.isDone = true;
+                    this.submitting = false;
                 })
                     .catch(e => {
                     // this.isDone = true;
                     console.log('[SIGN] Error reloading envelope', e);
+                    this.submitting = false;
                 });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
             }
-            this.submitting = false;
             return;
         }
         // Find and focus the next incomplete field (that is fillable)
@@ -454,7 +464,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             }
         });
         el.addEventListener('attached', async (e) => {
-            // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
             this.showSpinner = true;
             try {
@@ -517,7 +526,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            // TODO: Review possible workflow/race conditions vs rendering in -document-page.
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -627,7 +635,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 e.stopPropagation();
                 // We don't allow this to be hidden
                 // this.showDeclined = false;
-            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null))))));
+            } })), this.submitting ||
+            (this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))))));
     }
     static get style() { return VerdocsSignStyle0; }
 }, [0, "verdocs-sign", {

package/dist/esm/verdocs-preview_9.entry.js

@@ -4,8 +4,8 @@ import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFie
 import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex, u as updateStoreRole } from './TemplateRoleStore-6d1bec83.js';
 import { g as getTemplateStore } from './TemplateStore-41799d0a.js';
 import { S as SDKError } from './errors-887f1e88.js';
-import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-faf0377f.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
+import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-faf0377f.js';
 import { f as format } from './format-b8602175.js';
 import { i as interact } from './interact.min-a71beb3d.js';
 import { b as updateCssTransform, c as removeCssTransform, g as getFieldId, d as defaultWidth, e as defaultHeight } from './utils-6ecd6558.js';
@@ -258,7 +258,7 @@ const VerdocsSend = class {
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
+            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
             environment: this.environment,
             // TODO: Make optional in the SDK
             initial_reminder: 0,
@@ -270,19 +270,19 @@ const VerdocsSend = class {
         console.log('[SEND] Creating envelope', details);
         createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
         })
             .catch(e => {
-            var _a;
+            var _a, _b, _c;
             console.log('Send error', e);
-            // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
+            VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || 'Error creating envelope, please try again later.');
             this.sending = false;
-            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+            (_c = this.sendingEnvelope) === null || _c === void 0 ? void 0 : _c.emit({ sending: false });
         });
     }
     handleCancel(e) {

package/dist/esm/verdocs-sign.entry.js

@@ -261,11 +261,17 @@ const VerdocsSign = class {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
+                })
+                    .catch(e => {
+                    console.log('Error updating initials', e);
+                    this.showSpinner = false;
                 });
             case 'signature':
                 // This can be caused by a focus-out event if the user clicks the field
@@ -274,15 +280,18 @@ const VerdocsSign = class {
                 if (!e.detail) {
                     return;
                 }
+                this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
                 return createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.showSpinner = false;
                 })
                     .catch(e => {
                     console.warn('[SIGN] Error updating signature', e);
+                    this.showSpinner = false;
                 });
             case 'date':
                 const { formattedDate } = e.detail;
@@ -362,16 +371,17 @@ const VerdocsSign = class {
                     this.envelope = envelope;
                     // The show-done dialog does this
                     // this.isDone = true;
+                    this.submitting = false;
                 })
                     .catch(e => {
                     // this.isDone = true;
                     console.log('[SIGN] Error reloading envelope', e);
+                    this.submitting = false;
                 });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
             }
-            this.submitting = false;
             return;
         }
         // Find and focus the next incomplete field (that is fillable)
@@ -447,7 +457,6 @@ const VerdocsSign = class {
             }
         });
         el.addEventListener('attached', async (e) => {
-            // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
             this.showSpinner = true;
             try {
@@ -510,7 +519,6 @@ const VerdocsSign = class {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            // TODO: Review possible workflow/race conditions vs rendering in -document-page.
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -620,7 +628,8 @@ const VerdocsSign = class {
                 e.stopPropagation();
                 // We don't allow this to be hidden
                 // this.showDeclined = false;
-            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null))))));
+            } })), this.submitting ||
+            (this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))))));
     }
 };
 VerdocsSign.style = VerdocsSignStyle0;