Issues #191: done.

src/components/Discover/Map/SidebarTraces.vue

@@ -83,6 +83,7 @@ export default {
       showTraceId: null,
       infinitMaxItems: false,
       infiniteData: [],
+      infiniteFinish: true, // 無限滾動是否載入完成
     }
   },
   computed: {
@@ -171,12 +172,15 @@ export default {
      * @param {number} id
      */
     async switchCaseData(id, count) {
-      if(count >= 1000) this.isLoading = true;
+      // 點同一筆 id 不要有動作
+      if(id == this.showTraceId) return;
+      // if(count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面
+      this.isLoading = true; // 都要 loading 畫面
       this.infinit404 = null;
       this.infinitMaxItems = false;
       this.showTraceId = id;
       this.infiniteStart = 0;
-      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count});
+      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count}); // 傳遞到 Map index 再關掉 loading
     },
     /**
      * 將 trace element nodes 資料彙整
@@ -245,7 +249,7 @@ export default {
      * @param {element} event
      */
     handleScroll(event) {
-      if(this.infinitMaxItems || this.cases.length < 20) return;
+      if(this.infinitMaxItems || this.cases.length < 20 || this.infiniteFinish === false) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
@@ -257,9 +261,13 @@ export default {
      */
     async fetchData() {
       try {
+        this.isLoading = true;
+        this.infiniteFinish = false;
         this.infiniteStart += 20;
         await this.allMapDataStore.getTraceDetail();
-        this.infiniteData = [...this.infiniteData, ...this.cases];
+        this.infiniteData = await [...this.infiniteData, ...this.cases];
+        this.infiniteFinish = await true;
+        this.isLoading = await false;
       } catch(error) {
         console.error('Failed to load data:', error);
       }