Skip to content

Commit f061932

Browse files
n0099n0099
committed
* wrap all lazy components with <DefineSuspenseLoading> to show loading spinner while fetching component @ <PostQueryForm>
* wrap `<LazyPlan>` with `<Suspense>` to show `<PlaceholderPostList>` while fetching component @ `<PostQueryPlanVisualizer>` * add class `.overflow-hidden` on the root element @ `<PlaceholderPostList>` * remove `<Lazy-` prefix on `<PostQueryForm>` & `<PostNav>` as they are always shown @ `pages/posts.vue` @ fe
1 parent 2fef58e commit f061932

4 files changed

Lines changed: 86 additions & 40 deletions

File tree

‎fe/src/components/placeholder/PostList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="row align-items-center">
2+
<div class="row align-items-center overflow-hidden">
33
<template v-if="isLoading">
44
<div class="col"><hr /></div>
55
<div class="w-auto">

‎fe/src/components/post/QueryPlanVisualizer.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,14 @@
1313
</select>
1414
</div>
1515
<DefinePlan v-slot="{ query }">
16-
<LazyPlan
17-
v-if="query !== undefined" :planQuery="query.query"
18-
:planSource="JSON.stringify(query.plan, null, 4)" class="pev2" />
16+
<Suspense :timeout="0">
17+
<template #fallback>
18+
<PlaceholderPostList isLoading class="loading-placeholder w-100" />
19+
</template>
20+
<LazyPlan
21+
v-if="query !== undefined" :planQuery="query.query"
22+
:planSource="JSON.stringify(query.plan, null, 4)" class="pev2" />
23+
</Suspense>
1924
</DefinePlan>
2025
<ReusePlan
2126
:key="selectedPage" v-if="selectedPage !== undefined"
@@ -49,8 +54,10 @@ select {
4954
}
5055
5156
.pev2 {
52-
height: 53rem;
5357
resize: block;
5458
contain: content;
5559
}
60+
.pev2, .loading-placeholder {
61+
height: 53rem;
62+
}
5663
</style>

‎fe/src/components/post/queryForm/QueryForm.vue‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,18 @@
4949
</div>
5050
</div>
5151
</div>
52+
<DefineSuspenseLoading v-slot="{ $slots }">
53+
<Suspense :timeout="0">
54+
<template #fallback>
55+
<div class="input-group-text">
56+
<div class="spinner-border" role="status">
57+
<span class="visually-hidden">Loading...</span>
58+
</div>
59+
</div>
60+
</template>
61+
<component :is="$slots.default" />
62+
</Suspense>
63+
</DefineSuspenseLoading>
5264
<div class="query-params">
5365
<div v-for="(p, pI) in params" :key="pI" class="input-group">
5466
<button @click="deleteParam(pI)" class="btn btn-link" type="button">
@@ -68,45 +80,59 @@
6880
</div>
6981
</div>
7082
<template v-if="p.name === 'fid'">
71-
<WidgetSelectForum v-model.number="p.value" class="flex-grow-0 w-50">
72-
<template #indicators="{ renderer }">
73-
<span class="input-group-text"><RenderFunction :renderer="renderer" /></span>
74-
</template>
75-
</WidgetSelectForum>
83+
<ReuseSuspenseLoading>
84+
<LazyWidgetSelectForum v-model.number="p.value" class="flex-grow-0 w-50">
85+
<template #indicators="{ renderer }">
86+
<div class="input-group-text"><RenderFunction :renderer="renderer" /></div>
87+
</template>
88+
</LazyWidgetSelectForum>
89+
</ReuseSuspenseLoading>
7690
</template>
7791
<template v-if="isPostIDParam(p)">
78-
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
79-
<LazyPostQueryFormWidgetInputNumericParam
80-
@update:modelValue="onParamUpdate(pI, $event)"
81-
:modelValue="params[pI] as KnownNumericParams"
82-
:placeholders="getPostIDParamPlaceholders(p)" />
92+
<ReuseSuspenseLoading>
93+
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
94+
</ReuseSuspenseLoading>
95+
<ReuseSuspenseLoading>
96+
<LazyPostQueryFormWidgetInputNumericParam
97+
@update:modelValue="onParamUpdate(pI, $event)"
98+
:modelValue="params[pI] as KnownNumericParams"
99+
:placeholders="getPostIDParamPlaceholders(p)" />
100+
</ReuseSuspenseLoading>
83101
</template>
84102
<template v-if="isDateTimeParam(p)">
85-
<LazyARangePicker
86-
v-model:value="p.subParam.range" showTime
87-
format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DDTHH:mm" size="large" />
103+
<ReuseSuspenseLoading>
104+
<LazyARangePicker
105+
v-model:value="p.subParam.range" showTime
106+
format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DDTHH:mm" size="large" />
107+
</ReuseSuspenseLoading>
88108
</template>
89109
<template v-if="isTextParam(p)">
90110
<input
91111
v-model="p.value" :placeholder="inputTextParamPlaceholder(p)"
92112
type="text" class="form-control" required />
93-
<PostQueryFormWidgetInputTextParam
94-
@update:modelValue="onParamUpdate(pI, $event)"
95-
:modelValue="params[pI] as KnownTextParams"
96-
:paramIndex="pI" />
113+
<ReuseSuspenseLoading>
114+
<LazyPostQueryFormWidgetInputTextParam
115+
@update:modelValue="onParamUpdate(pI, $event)"
116+
:modelValue="params[pI] as KnownTextParams"
117+
:paramIndex="pI" />
118+
</ReuseSuspenseLoading>
97119
</template>
98120
<template
99121
v-if=" // https://github.com/microsoft/TypeScript/issues/51678
100122
p.name === 'threadViewCount'
101123
|| p.name === 'threadShareCount'
102124
|| p.name === 'threadReplyCount'
103125
|| p.name === 'replySubReplyCount'">
104-
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
105-
<LazyPostQueryFormWidgetInputNumericParam
106-
@update:modelValue="onParamUpdate(pI, $event)"
107-
:modelValue="params[pI] as KnownNumericParams"
108-
:paramIndex="pI"
109-
:placeholders="{ IN: '100,101,102,...', BETWEEN: '100,200', equals: '100' }" />
126+
<ReuseSuspenseLoading>
127+
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
128+
</ReuseSuspenseLoading>
129+
<ReuseSuspenseLoading>
130+
<LazyPostQueryFormWidgetInputNumericParam
131+
@update:modelValue="onParamUpdate(pI, $event)"
132+
:modelValue="params[pI] as KnownNumericParams"
133+
:paramIndex="pI"
134+
:placeholders="{ IN: '100,101,102,...', BETWEEN: '100,200', equals: '100' }" />
135+
</ReuseSuspenseLoading>
110136
</template>
111137
<template v-if="p.name === 'threadProperties'">
112138
<div v-for="property in ['good', 'sticky']" :key="property" class="input-group-text">
@@ -124,11 +150,15 @@
124150
</div>
125151
</template>
126152
<template v-if="p.name === 'authorUid' || p.name === 'latestReplierUid'">
127-
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
128-
<LazyPostQueryFormWidgetInputNumericParam
129-
@update:modelValue="onParamUpdate(pI, $event)"
130-
:modelValue="params[pI] as KnownNumericParams"
131-
:placeholders="uidParamsPlaceholder" />
153+
<ReuseSuspenseLoading>
154+
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
155+
</ReuseSuspenseLoading>
156+
<ReuseSuspenseLoading>
157+
<LazyPostQueryFormWidgetInputNumericParam
158+
@update:modelValue="onParamUpdate(pI, $event)"
159+
:modelValue="params[pI] as KnownNumericParams"
160+
:placeholders="uidParamsPlaceholder" />
161+
</ReuseSuspenseLoading>
132162
</template>
133163
<template v-if="p.name === 'authorManagerType'">
134164
<select v-model="p.value" class="form-control flex-grow-0 w-25">
@@ -149,11 +179,15 @@
149179
</select>
150180
</template>
151181
<template v-if="p.name === 'authorExpGrade'">
152-
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
153-
<LazyPostQueryFormWidgetInputNumericParam
154-
@update:modelValue="onParamUpdate(pI, $event)"
155-
:modelValue="params[pI] as KnownNumericParams"
156-
:placeholders="{ IN: '9,10,11,...', BETWEEN: '9,18', equals: '18' }" />
182+
<ReuseSuspenseLoading>
183+
<LazyPostQueryFormWidgetSelectRange v-model="p.subParam.range" />
184+
</ReuseSuspenseLoading>
185+
<ReuseSuspenseLoading>
186+
<LazyPostQueryFormWidgetInputNumericParam
187+
@update:modelValue="onParamUpdate(pI, $event)"
188+
:modelValue="params[pI] as KnownNumericParams"
189+
:placeholders="{ IN: '9,10,11,...', BETWEEN: '9,18', equals: '18' }" />
190+
</ReuseSuspenseLoading>
157191
</template>
158192
</div>
159193
</div>
@@ -198,6 +232,7 @@ const { // https://github.com/orgs/vuejs/discussions/6147
198232
changeParam,
199233
deleteParam
200234
} = queryFormDeps;
235+
const [DefineSuspenseLoading, ReuseSuspenseLoading] = createReusableTemplate();
201236
202237
const getPostIDParamPlaceholders = (p: Param) => ({
203238
IN: p.name === 'tid' ? '5000000000,5000000001,5000000002,...' : '15000000000,15000000001,15000000002,...',
@@ -275,4 +310,8 @@ watch(() => uniqueParams.value.postTypes.value, (to, from) => {
275310
padding-inline-start: 22px;
276311
padding-inline-end: 10px;
277312
}
313+
.spinner-border {
314+
height: 1.5rem;
315+
width: 1.5rem;
316+
}
278317
</style>

‎fe/src/pages/posts.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<aside class="container">
4-
<LazyPostQueryForm :isLoading="isFetching" :queryFormDeps="queryFormDeps" />
4+
<PostQueryForm :isLoading="isFetching" :queryFormDeps="queryFormDeps" />
55
</aside>
66
<PostQueryPlanVisualizer v-if="data !== undefined" :data="data" class="border-bottom" />
77
<aside class="container">
@@ -12,7 +12,7 @@
1212
</aside>
1313
<div v-if="!(data === undefined || _.isEmpty(data.pages))" class="container-fluid">
1414
<div class="row flex-nowrap">
15-
<LazyPostNav v-if="renderType === 'list'" :queryParam="queryParam" />
15+
<PostNav v-if="renderType === 'list'" :queryParam="queryParam" />
1616
<div class="post-page col mx-auto ps-0" :class="{ 'renderer-list': renderType === 'list' }">
1717
<PostPage
1818
v-for="(page, pageIndex) in data.pages"

0 commit comments

Comments
 (0)