TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-23 20:54:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

(admin) put user / profile charts behind a loading spinner and make user charts optional to load

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-09-26 18:55:22 +02:00
parent c336d8f2f3
commit 160cde5d2c
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/admin/profiles.vue
View File

@ -13,9 +13,9 @@
Profiles
</h2>
<section>
<Loading :value="chart">
<ChartSet :name="`profiles (${config.locale})`" :data="chart" init="cumulative" />
</section>
</Loading>
</div>
</Page>
</template>
@ -34,7 +34,10 @@ export default defineComponent({
title: `${translator.translate('admin.header')} • Profiles`,
}, translator);
const { data: chart } = await useFetch(`/api/admin/stats/users-chart/${config.locale}`);
const { data: chart } = await useFetch(
`/api/admin/stats/users-chart/${config.locale}`,
{ server: false, lazy: true },
);
return {
config: useConfig(),

25
pages/admin/users.vue
View File

@ -107,7 +107,15 @@
</section>
<section>
<ChartSet name="users" :data="chart" init="cumulative" />
<details class="border" @toggle="fetchChart()">
<summary class="bg-light p-3">
<Icon v="chart-line" />
Chart
</summary>
<Loading :value="chartAsyncData.data.value" class="m-0">
<ChartSet name="users" :data="chartAsyncData.data.value" init="cumulative" />
</Loading>
</details>
</section>
<section>
@ -149,17 +157,17 @@ export default {
const impersonatorCookie = useCookie('impersonator', longtimeCookieSetting);
const stats = useFetch('/api/admin/stats');
const chart = useFetch('/api/admin/stats/users-chart/_');
await Promise.all([stats, chart]);
const statsAsyncData = useFetch('/api/admin/stats');
const chartAsyncData = useFetch('/api/admin/stats/users-chart/_', { immediate: false });
await statsAsyncData;
return {
config: useConfig(),
dialogue,
tokenCookie,
impersonatorCookie,
stats: stats.data.value,
chart: chart.data.value,
stats: statsAsyncData.data.value,
chartAsyncData,
};
},
data() {
@ -218,6 +226,11 @@ export default {
await this.dialogue.alert(this.$t('error.generic', 'danger'));
}
},
fetchChart() {
if (this.chartAsyncData.status.value === 'idle') {
this.chartAsyncData.execute();
}
},
},
};
</script>