Loading overlay blocks browser navigation buttons

[vcpstudio]

https://github.com/logue/vite-vuetify-ts-starter/blob/d013cbe9b53fa8d8133bc7dc84ba831bf2668d92/src/App.vue#LL109C8-L109C8

If you do not set the close-on-back="false" attribute, then there will be problems when working with browser navigation buttons (back/forward)

https://vuetifyjs.com/en/api/v-overlay/#props-close-on-back

[logue]

It is a specification that it remains displayed when a script error occurs and becomes inoperable.
This loading screen is processed on the Pinia side.

vite-vuetify-ts-starter/src/store/GlobalStore.ts

Lines 17 to 28 in d013cbe

	/**
	* Show loading Overlay
	*
	* @param display - visibility
	*/
	function setLoading(display: boolean): void {
	loading.value = display;
	if (!display) {
	// Reset Progress value
	progress.value = null;
	}
	}

For example, when a communication error occurs in axios, it is necessary to implement a process to manually turn off the loading screen as follows.

import axios, { type AxiosProgressEvent, type AxiosResponse } from 'axios';
import { useGlobal } from '@/store';

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.headers.common.Accept = 'application/json';
axios.defaults.withCredentials = true;
axios.defaults.onUploadProgress = (progressEvent: AxiosProgressEvent): void => {
  const globalStore = useGlobal();
  if (progressEvent.progress && progressEvent.total) {
    globalStore.setProgress(
      Math.round((progressEvent.loaded * 100) / progressEvent.total)
    );
  } else {
    globalStore.setProgress(null);
  }
  nextTick();
};
axios.defaults.onDownloadProgress = (
  progressEvent: AxiosProgressEvent
): void => {
  const globalStore = useGlobal();
  if (progressEvent.progress && progressEvent.total) {
    globalStore.setProgress(
      Math.round((progressEvent.loaded * 100) / progressEvent.total)
    );
  } else {
    globalStore.setProgress(null);
  }
  nextTick();
};
axios.interceptors.request.use(request => {
  const globalStore = useGlobal();
  globalStore.setLoading(true);
  return request;
});
axios.interceptors.response.use(
  (response: AxiosResponse<any, any>) => {
    const globalStore = useGlobal();
    globalStore.setLoading(false);
    return response;
  },
  async error => {
    const globalStore = useGlobal();
    
    globalStore.setMessage('An unknown error has occurred.');
    globalStore.setLoading(false);
    // location.reload();
    throw new Error(error);
    globalStore.setLoading(false);
    console.log(error.response.data);
    return await Promise.reject(error);
  }
);

[vcpstudio]

Recorded a video for a visual example:

(Google Chrome 113.0.5672.127 64bit)

[logue]

Fixed.

[vcpstudio]

I liked the page loader indicator idea, but your fix removed it

[logue]

This is a provisional measure.

Due to various reasons (TypeScript5 compatibility, vitest issues, etc.), this is a last resort for the significant delay in release.

Since the idea used in Vuetify2 was diverted as it is, there were parts that did not work properly.