lazy load app preview on homepage

windmill-labs · Aug 27, 2024 · 70ea188 · 70ea188
1 parent 8f91dc4
commit 70ea188
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
@@ -4,7 +4,6 @@
 	import { classNames, displayDate, emptyString } from '$lib/utils'
 	import { AppService, type AppWithLastVersion, type AppHistory } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import AppPreview from './AppPreview.svelte'
 	import { Skeleton } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { createEventDispatcher } from 'svelte'
@@ -179,7 +178,10 @@
 							</Button>
 						</div>
 					</div>
-					<AppPreview noBackend app={selected.value} context={{}} />
+
+					{#await import('$lib/components/apps/editor/AppPreview.svelte') then Module}
+						<Module.default noBackend app={selected.value} context={{}} />
+					{/await}
 				{:else}
 					<Skeleton layout={[[40]]} />
 				{/if}

diff --git a/frontend/src/lib/components/flows/FlowHistory.svelte b/frontend/src/lib/components/flows/FlowHistory.svelte
@@ -5,7 +5,6 @@
 	import { type Flow, FlowService, type FlowVersion } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { Skeleton } from '$lib/components/common'
-	import FlowViewer from '../FlowViewer.svelte'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import DrawerContent from '../common/drawer/DrawerContent.svelte'
 	import Button from '../common/button/Button.svelte'
@@ -206,7 +205,9 @@
 										>Redeploy with that version
 									</Button>
 								</div>
-								<FlowViewer flow={selected} />
+								{#await import('$lib/components/FlowViewer.svelte') then Module}
+									<Module.default flow={selected} />
+								{/await}
 							</div>
 						{:else}
 							<Skeleton layout={[[40]]} />

diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -9,7 +9,6 @@
 	import type { HubItem } from '$lib/components/flows/pickers/model'
 	import PickHubScript from '$lib/components/flows/pickers/PickHubScript.svelte'
 	import PickHubFlow from '$lib/components/flows/pickers/PickHubFlow.svelte'
-	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import { Building, ExternalLink, GitFork, Globe2, Loader2 } from 'lucide-svelte'
 	import { hubBaseUrlStore } from '$lib/stores'
@@ -18,7 +17,6 @@
 	import ItemsList from '$lib/components/home/ItemsList.svelte'
 	import CreateActionsApp from '$lib/components/flows/CreateActionsApp.svelte'
 	import PickHubApp from '$lib/components/flows/pickers/PickHubApp.svelte'
-	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 	import { writable } from 'svelte/store'
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 	import { HOME_SHOW_HUB, HOME_SHOW_CREATE_FLOW, HOME_SHOW_CREATE_APP } from '$lib/consts'
@@ -146,7 +144,9 @@
 		</svelte:fragment>
 
 		{#if flowViewerFlow?.flow}
-			<FlowViewer flow={flowViewerFlow.flow} />
+			{#await import('$lib/components/FlowViewer.svelte') then Module}
+				<Module.default flow={flowViewerFlow.flow} />
+			{/await}
 		{:else}
 			<div class="p-2">
 				<Loader2 class="animate-spin" />
@@ -185,23 +185,25 @@
 
 		{#if appViewerApp?.app}
 			<div class="p-4">
-				<AppPreview
-					app={appViewerApp?.app?.value}
-					appPath="''"
-					{breakpoint}
-					policy={{}}
-					workspace="hub"
-					isEditor={false}
-					context={{
-						username: $userStore?.username ?? 'anonymous',
-						email: $userStore?.email ?? 'anonymous',
-						groups: $userStore?.groups ?? []
-					}}
-					summary={appViewerApp?.app.summary ?? ''}
-					noBackend
-					replaceStateFn={(path) => replaceState(path, $page.state)}
-					gotoFn={(path, opt) => goto(path, opt)}
-				/>
+				{#await import('$lib/components/apps/editor/AppPreview.svelte') then Module}
+					<Module.default
+						app={appViewerApp?.app?.value}
+						appPath="''"
+						{breakpoint}
+						policy={{}}
+						workspace="hub"
+						isEditor={false}
+						context={{
+							username: $userStore?.username ?? 'anonymous',
+							email: $userStore?.email ?? 'anonymous',
+							groups: $userStore?.groups ?? []
+						}}
+						summary={appViewerApp?.app.summary ?? ''}
+						noBackend
+						replaceStateFn={(path) => replaceState(path, $page.state)}
+						gotoFn={(path, opt) => goto(path, opt)}
+					/>
+				{/await}
 			</div>
 		{/if}
 	</DrawerContent>