Docusign Embedded Signing Loader Left Aligned

We’re using the Docusgin Embedded Signing flow with the "default" view. When loading up a document, the embedded loader appears on the screen's left, but when using the "focused" view the loader is well aligned at the center. However, there is no way to modify this. Is there something we can pass or is there a bug with our container?

Screenshot

Ts Code

<script lang="ts">
    import { goto } from '$app/navigation';
    import { PUBLIC_DOCUSIGN_INTEGRATION_KEY } from '$env/static/public';
    import Loader from '$lib/components/Loader.svelte';
    import formStore from '../store/index';
    import Alert from '$lib/components/Alert.svelte';

    const infoMessage =
        'To ensure a safe and secure signing process, we use DocuSign to allow you to review and sign your contract online. Click the button below to access your contract and complete the signing with confidence.';

    export let signingUrl: string;
    let isLoading = false;
    let loaded = false;
    let policyAgreed = false;

    // Go the next step
    const redirect = () => {
        formStore.updateContractSigning({ accepted: true });
        goto('/thank-you');
    };

    // Load the DocuSign script asynchronously
    const loadDocuSignScriptAsync = () => {
        return new Promise<void>((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://js-d.docusign.com/bundle.js';
            script.async = true;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error('Failed to load DocuSign script'));
            document.head.appendChild(script);
        });
    };

    // This function will initialize DocuSign and configure the signing options
    const handleViewContract = async () => {
        try {
            loaded = true;
            isLoading = true;
            await loadDocuSignScriptAsync(); // Ensure script is loaded before accessing DocuSign
            const docusign = await window.DocuSign.loadDocuSign(PUBLIC_DOCUSIGN_INTEGRATION_KEY);
            const signing = docusign.signing({
                url: signingUrl,
                displayFormat: 'default',
                style: {
                    branding: {
                        primaryButton: {
                            backgroundColor: '#FF6B00', // Background color of primary button
                            color: '#fff' // Text color of primary button
                        }
                    },
                    signingNavigationButton: {
                        finishText: 'Finish', // Custom text for the finish button
                        position: 'bottom-center' // Position of the finish button
                    }
                }
            });

            // When the DocuSign UI is ready
            signing.on('ready', (event: any) => {
                console.log('UI is rendered', event);
                policyAgreed = true;
                const agreementDiv = document.getElementById('agreement');
                if (agreementDiv) {
                    agreementDiv.style.backgroundColor = 'white'; // Solid white background
                }
            });

            // When the signing session ends
            signing.on('sessionEnd', (event: any) => {
                console.log('Session ended', event);
                document.body.classList.remove('overflow-hidden'); // Restore scrolling
                const agreementDiv = document.getElementById('agreement');
                if (agreementDiv) {
                    agreementDiv.style.backgroundColor = ''; // Reset background
                }
                if (event.sessionEndType === 'signing_complete') {
                    agreementDiv?.remove();
                    redirect(); // Proceed to the next step
                }
            });

            signing.mount('#agreement');
        } catch (error) {
            console.log('Error initializing DocuSign:', error);
        }
        finally {
            isLoading = false;
        }
    };
</script>

<div class="flex flex-col items-center justify-center">
    {#if isLoading}
        <Loader message="Loading contract details..." />
    {/if}

    {#if !loaded}
        <div>
            <Alert type="info" message={infoMessage} />
        </div>
        <button
            class="mt-6 w-full md:w-auto py-3 px-6 text-lg font-semibold rounded-md text-white bg-secondary hover:bg-secondary-dark transition duration-300 ease-in-out"
            on:click={handleViewContract}
        >
            View Your Contract
        </button>
    {:else}
        <p class="text-gray-200 mb-6">
            Please take a moment to review the summary of your subscription and carefully sign off on the
            terms and conditions to complete the process.
        </p>
    {/if}
</div>

<!-- DocuSign signing ceremony container -->
<div
    id="agreement"
    class={`w-full ${policyAgreed ? 'absolute top-0 left-0 z-50 h-full' : ''}`}
    style="box-sizing: border-box;"
></div>

[I work for Docusign]

This is a known bug in the Docusign JS embedded signing feature. It has Docusign internal bug number C2A-3615.

It is planned to be fixed but we don't have a schedule yet. When it is fixed, you will not need to change your application software, the loading indicator will be moved to the center for all apps.

Thank you for using Docusign, I'm sorry this bug is not yet fixed.