Comments (5)
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
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);
}
);
from vite-vuetify-ts-starter.
Recorded a video for a visual example:
(Google Chrome 113.0.5672.127 64bit)
from vite-vuetify-ts-starter.
Fixed.
from vite-vuetify-ts-starter.
I liked the page loader indicator idea, but your fix removed it
from vite-vuetify-ts-starter.
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.
from vite-vuetify-ts-starter.
Related Issues (15)
- I use your starter to develope but it always stop running during hmr HOT 2
- Static Assets Build and Deploy to GitHub Pages HOT 2
- Content Security Policy setting HOT 2
- Running on Windows and node 18.12.1 is very slow HOT 6
- Unit tests do not work HOT 5
- Performance Issues and Vuetify Plugin Problems in Your Project HOT 1
- [Deprecated Dependencies] Vitest Coverage
- improve performance and reduce build size HOT 2
- import colors from vuetify/lib/util/colors HOT 1
- tsconfig HOT 5
- husky precommit HOT 21
- type declaration HOT 2
- eslint | public files imports HOT 2
- Editing markdown throws Eslint errors [ESLint] Parsing error: Invalid character. (null) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-vuetify-ts-starter.