JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite/vuetify-poc: add page loading bar

Browse Source 
This change adds a loading bar in the Vuetify UI's app bar that is
active whenever a page is being loaded.

Resolves #6412

Change-Id: I0a4e148d843c7a3bace63410e8802fde3c7e92eb
This commit is contained in:
Jeremy Wharton 2023-10-19 09:35:48 -05:00 committed by Storj Robot
parent b2c6ec0091
commit 405c46d0f6
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
View File

@ -3,6 +3,8 @@
<template>
<v-app-bar :elevation="0">
<v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" />
<v-app-bar-nav-icon
v-if="showNavDrawerButton"
variant="text"
@ -179,6 +181,7 @@ import {
VListItemSubtitle,
VDivider,
VChip,
VProgressLinear,
} from 'vuetify/components';
import { useAppStore } from '@poc/store/appStore';
@ -298,7 +301,7 @@ async function onLogout(): Promise<void> {
analyticsStore.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout();
} catch (error) {
notify.error(error.message, null);
notify.error(error.message);
}
analyticsStore.pageVisit(RouteConfig.Login.path);

4
web/satellite/vuetify-poc/src/router/index.ts
View File

@ -105,6 +105,8 @@ export const router = createRouter({
});
router.beforeEach((to, _, next) => {
useAppStore().setIsNavigating(true);
const configStore = useConfigStore();
if (!configStore.state.config.billingFeaturesEnabled && to.name === RouteName.Billing) {
next({ name: RouteName.AccountSettings });
@ -114,6 +116,8 @@ router.beforeEach((to, _, next) => {
next();
});
router.afterEach(() => useAppStore().setIsNavigating(false));
export function startTitleWatcher(): void {
const projectsStore = useProjectsStore();
const configStore = useConfigStore();

6
web/satellite/vuetify-poc/src/store/appStore.ts
View File

@ -8,6 +8,7 @@ class AppState {
public isNavigationDrawerShown = true;
public isUpgradeFlowDialogShown = false;
public pathBeforeAccountPage: string | null = null;
public isNavigating = false;
}
export const useAppStore = defineStore('vuetifyApp', () => {
@ -25,6 +26,10 @@ export const useAppStore = defineStore('vuetifyApp', () => {
state.pathBeforeAccountPage = path;
}
function setIsNavigating(isLoading: boolean) {
state.isNavigating = isLoading;
}
function clear(): void {
state.isNavigationDrawerShown = true;
state.isUpgradeFlowDialogShown = false;
@ -36,6 +41,7 @@ export const useAppStore = defineStore('vuetifyApp', () => {
toggleNavigationDrawer,
toggleUpgradeFlow,
setPathBeforeAccountPage,
setIsNavigating,
clear,
};
});