From 1d16656b3904dca4575791f160a3a5b61fe7821d Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 2 Nov 2024 11:09:52 -0400
Subject: [PATCH] add `<Suspense>` to enable async components and dynamic
 imports under the deck UI

---
 packages/frontend/src/ui/deck.vue | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index cd4e256056..1e96b5d50e 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -18,16 +18,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
 				@wheel.self="onWheel"
 			>
-				<component
-					:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
-					v-for="id in ids"
-					:ref="id"
-					:key="id"
-					:class="$style.column"
-					:column="columns.find(c => c.id === id)!"
-					:isStacked="ids.length > 1"
-					@headerWheel="onWheel"
-				/>
+				<Suspense>
+					<component
+						:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
+						v-for="id in ids"
+						:ref="id"
+						:key="id"
+						:class="$style.column"
+						:column="columns.find(c => c.id === id)!"
+						:isStacked="ids.length > 1"
+						@headerWheel="onWheel"
+					/>
+					<template #fallback>
+						<MkLoading/>
+					</template>
+				</Suspense>
 			</section>
 			<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
 				<div>{{ i18n.ts._deck.introduction }}</div>