Scripts not loading properly (Document Head Management)

[johnyvelho]

Which project does this relate to?

Router

Describe the bug

External scripts are not getting loaded when adding it through scripts/HeadContent/Scripts component.
<HeadContent /> and <Scripts /> components are rendered in the __root.tsx.

It only get loaded if the flag sync: true is added to the script. but doing it the script may not be ready when the page loads.

export const Route = createFileRoute('/onboarding/$participant_id/(nostepper)/signature/docusign')({
    component: DocusignSignaturePage,
    preload: false,
    loader: async ({ params, context }) => {
        const response = await signatureMutation(params.participant_id);

        if (response.error) {
            throw new Error('There was an error starting the signature process');
        }

        return {
            docusignUrl: response.data.url,
        };
    },
    head: () => {
        return {
            scripts: [
                {
                    src: 'https://js-d.docusign.com/bundle.js',
                },
            ],
        };
    },
});

minimal example: https://stackblitz.com/edit/tanstack-router-frejwjfz
discussion on discord: https://discord.com/channels/719702312431386674/1007702008448426065/threads/1347295057870454804

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-frejwjfz

Steps to Reproduce the Bug or Issue

1. navigate to /about
2. observe in the network events that bundle.js script from docusign is not getting loaded

Expected behavior

external scripts get loaded with/without async flag

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response