From 08d0e62afdba48c8ab0b4abb7659ed585913ba83 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Nov 2025 20:21:33 +0400
Subject: [PATCH] fix: preload studio assets

---
 src/lib/studio/studio-widget.ts | 4 +++-
 src/routes/+layout.svelte       | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts
index 16359c750..907d52948 100644
--- a/src/lib/studio/studio-widget.ts
+++ b/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;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 81429e239..944f31411 100644
--- a/src/routes/+layout.svelte
+++ b/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)}>