Merge pull request #2587 from appwrite/feat-profile-preload-cdn-assets

src/lib/studio/studio-widget.ts

@@ -11,9 +11,11 @@ const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
 const BLOCK_START_BASE_OFFSET = 48;
 const INLINE_START_BASE_OFFSET = 8;
 const CACHE_BUSTER = new Date().getTime();
-const CDN_URL =
+export const CDN_URL =
     'https://esm.sh/@imagine.dev/web-components@0/web-components?bundle=false&deps=react@19.1.0,react-dom@19.1.0&cache=' +
     CACHE_BUSTER;
+export const CDN_CSS_URL =
+    'https://esm.sh/@imagine.dev/web-components@0/imagine-web-components.css?cache=' + CACHE_BUSTER;
 const DEV_OVERRIDE_WEB_COMPONENTS = env?.PUBLIC_AI_OVERRIDE_WEB_COMPONENTS === 'true';
 
 let component: HTMLElement | null = null;

src/routes/+layout.svelte

@@ -25,6 +25,7 @@
     import { isSmallViewport, updateViewport } from '$lib/stores/viewport';
     import { feedback } from '$lib/stores/feedback';
     import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
+    import { CDN_CSS_URL, CDN_URL } from '$lib/studio/studio-widget';
 
     function resolveTheme(theme: AppStore['themeInUse']) {
         switch (theme) {
@@ -185,6 +186,11 @@
     {/if}
 
     <link rel="stylesheet" href={`${base}/css/profiles/${resolvedProfile.id}.css`} />
+
+    {#if resolvedProfile.id === ProfileMode.STUDIO}
+        <link rel="preload" as="style" type="text/css" href={CDN_CSS_URL} />
+        <link rel="preload" as="script" type="text/javascript" href={CDN_URL} />
+    {/if}
 </svelte:head>
 
 <Root theme={resolveTheme($app.themeInUse)}>