fix(astro): Ensure runInjectionScript runs on initial page loads with view transitions enabled (#7801)

Co-authored-by: Robert Soriano <sorianorobertc@gmail.com>

Author: 2 people

.changeset/ready-cats-tease.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': patch
+---
+
+Fixed an issue when using `ClientRouter` where Clerk components don't load until navigation is performed.

packages/astro/src/integration/create-integration.ts

@@ -125,9 +125,10 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
             }
 
             if (transitionEnabledOnThisPage()) {
-              const { navigate, swapFunctions } = await import('astro:transitions/client');
+              // We must do the dynamic imports within the event listeners because otherwise we may race and miss initial astro:page-load
+              document.addEventListener('astro:before-swap', async (e) => {
+                const { swapFunctions } = await import('astro:transitions/client');
 
-              document.addEventListener('astro:before-swap', (e) => {
                 const clerkComponents = document.querySelector('#clerk-components');
                 // Keep the div element added by Clerk
                 if (clerkComponents) {
@@ -139,6 +140,8 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
               });
 
               document.addEventListener('astro:page-load', async (e) => {
+                const { navigate } = await import('astro:transitions/client');
+
                 await runInjectionScript({
                   ...${JSON.stringify(internalParams)},
                   routerPush: navigate,