refactor: only show NProgress when loading time is too long

src/main.js

@@ -9,6 +9,8 @@ import '@/utils/filters';
 import './registerServiceWorker';
 import { dailyTask } from '@/utils/common';
 import '@/assets/css/global.scss';
+import NProgress from 'nprogress';
+import '@/assets/css/nprogress.css';
 
 window.resetApp = () => {
   localStorage.clear();
@@ -20,7 +22,6 @@ window.resetApp = () => {
   });
   return '已重置应用，请刷新页面（按Ctrl/Command + R）';
 };
-
 console.log(
   '如出现问题，可尝试在本页输入 %cresetApp()%c 然后按回车重置应用。',
   'background: #eaeffd;color:#335eea;padding: 4px 6px;border-radius:3px;',
@@ -31,9 +32,9 @@ Vue.use(VueAnalytics, {
   id: 'UA-180189423-1',
   router,
 });
-
 Vue.config.productionTip = false;
 
+NProgress.configure({ showSpinner: false, trickleSpeed: 100 });
 dailyTask();
 
 new Vue({

src/router/index.js

@@ -1,11 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import NProgress from 'nprogress';
-import '@/assets/css/nprogress.css';
 import { isLooseLoggedIn, isAccountLoggedIn } from '@/utils/auth';
 
-NProgress.configure({ showSpinner: false, trickleSpeed: 100 });
-
 Vue.use(VueRouter);
 const routes = [
   {
@@ -169,13 +165,4 @@ router.beforeEach((to, from, next) => {
   }
 });
 
-router.afterEach(to => {
-  if (
-    to.matched.some(record => !record.meta.keepAlive) &&
-    !['settings', 'dailySongs', 'lastfmCallback'].includes(to.name)
-  ) {
-    NProgress.start();
-  }
-});
-
 export default router;

src/views/album.vue

@@ -159,12 +159,13 @@ export default {
     ContextMenu,
   },
   beforeRouteUpdate(to, from, next) {
-    NProgress.start();
+    this.show = false;
     this.loadData(to.params.id);
     next();
   },
   data() {
     return {
+      show: false,
       album: {
         id: 0,
         picUrl: '',
@@ -174,7 +175,6 @@ export default {
       },
       tracks: [],
       showFullDescription: false,
-      show: false,
       moreAlbums: [],
       dynamicDetail: {},
       subtitle: '',
@@ -206,11 +206,6 @@ export default {
       }
     },
   },
-  watch: {
-    album: function () {
-      this.$parent.$refs.main.scrollTo({ top: 0 });
-    },
-  },
   created() {
     this.loadData(this.$route.params.id);
   },
@@ -256,6 +251,9 @@ export default {
       }
     },
     loadData(id) {
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       getAlbum(id).then(data => {
         this.album = data.album;
         this.tracks = data.songs;

src/views/artist.vue

@@ -207,7 +207,6 @@ export default {
     ContextMenu,
   },
   beforeRouteUpdate(to, from, next) {
-    NProgress.start();
     this.artist.img1v1Url =
       'https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg';
     this.loadData(to.params.id, next);
@@ -257,9 +256,6 @@ export default {
       };
     },
   },
-  created() {
-    this.loadData(this.$route.params.id);
-  },
   activated() {
     if (this.artist?.id?.toString() !== this.$route.params.id) {
       this.loadData(this.$route.params.id);
@@ -271,7 +267,9 @@ export default {
     ...mapMutations(['appendTrackToPlayerList']),
     ...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']),
     loadData(id, next = undefined) {
-      NProgress.start();
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       this.show = false;
       this.$parent.$refs.main.scrollTo({ top: 0 });
       getArtist(id).then(data => {

src/views/artistMV.vue

@@ -22,13 +22,12 @@ import ButtonTwoTone from '@/components/ButtonTwoTone.vue';
 import MvRow from '@/components/MvRow.vue';
 
 export default {
-  name: 'artistMV',
+  name: 'ArtistMV',
   components: {
     MvRow,
     ButtonTwoTone,
   },
   beforeRouteUpdate(to, from, next) {
-    NProgress.start();
     this.id = to.params.id;
     this.loadData();
     next();
@@ -58,6 +57,9 @@ export default {
   },
   methods: {
     loadData() {
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       getArtist(this.id).then(data => {
         this.artist = data.artist;
       });

src/views/dailyTracks.vue

@@ -35,7 +35,9 @@ export default {
   },
   created() {
     if (this.dailyTracks.length === 0) {
-      NProgress.start();
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       this.loadDailyTracks();
     } else {
       this.show = true;

src/views/explore.vue

@@ -86,7 +86,6 @@ export default {
     SvgIcon,
   },
   beforeRouteUpdate(to, from, next) {
-    NProgress.start();
     this.showLoadMoreButton = false;
     this.hasMore = true;
     this.playlists = [];
@@ -122,7 +121,9 @@ export default {
   methods: {
     ...mapMutations(['togglePlaylistCategory']),
     loadData() {
-      if (!this.show) NProgress.start();
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       this.activeCategory =
         this.$route.query.category === undefined
           ? '全部'

src/views/home.vue

@@ -110,7 +110,9 @@ export default {
   },
   methods: {
     loadData() {
-      if (!this.show) NProgress.start();
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       recommendPlaylist({
         limit: 10,
       }).then(data => {

src/views/library.vue

@@ -230,7 +230,9 @@ export default {
     },
   },
   created() {
-    NProgress.start();
+    setTimeout(() => {
+      if (!this.show) NProgress.start();
+    }, 1000);
     this.loadData();
   },
   activated() {

src/views/playlist.vue

@@ -407,6 +407,9 @@ export default {
     } else {
       this.loadData(this.$route.params.id);
     }
+    setTimeout(() => {
+      if (!this.show) NProgress.start();
+    }, 1000);
   },
   methods: {
     ...mapMutations(['appendTrackToPlayerList']),

src/views/search.vue

@@ -157,7 +157,9 @@ export default {
       });
     },
     getData() {
-      NProgress.start();
+      setTimeout(() => {
+        if (!this.show) NProgress.start();
+      }, 1000);
       this.show = false;
 
       const requestAll = requests => {