DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add `<Suspense>` to enable async components and dynamic imports under the deck UI

This commit is contained in:
Hazelnoot 2024-11-02 11:09:52 -04:00
parent ed6c781426
commit 1d16656b39
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/ui/deck.vue
View File

@ -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' }" :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" @wheel.self="onWheel"
> >
<component <Suspense>
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn" <component
v-for="id in ids" :is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
:ref="id" v-for="id in ids"
:key="id" :ref="id"
:class="$style.column" :key="id"
:column="columns.find(c => c.id === id)!" :class="$style.column"
:isStacked="ids.length > 1" :column="columns.find(c => c.id === id)!"
@headerWheel="onWheel" :isStacked="ids.length > 1"
/> @headerWheel="onWheel"
/>
<template #fallback>
<MkLoading/>
</template>
</Suspense>
</section> </section>
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding"> <div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
<div>{{ i18n.ts._deck.introduction }}</div> <div>{{ i18n.ts._deck.introduction }}</div>