logout handling

src/components/scroll-table.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="Scroll-Table">
         <my-table :columns="columns" :rows="rows"></my-table>
-        <div v-show="hasMore" v-if="!loading" v-observe-visibility="visibilityChanged">...</div>
-        <div v-if="loading">loading...</div>
+        <div v-if="loadingDelayed">loading...</div>
+        <div style="padding-left: 30%; padding-bottom: 100px;">
+            <span v-show="hasMore" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
+        </div>
     </div>
 </template>
 
@@ -56,15 +58,28 @@ export default {
     watch: {
         newRows(rows) {
             rows.forEach(row => {
-                this.rows.push(row)
+                this.rowsToPush.push(row);
             });
             this.currentOffset += rows.length;
+            this.pushRows(); // for transition
+        },
+        loading(l) {
+            if (!l) {
+                // delay after loading for visibility observer
+                setTimeout(() => {
+                    this.loadingDelayed = false;
+                }, 200);
+            } else {
+                this.loadingDelayed = true;
+            }
         }
     },
     data() {
         return {
             rows: [ ],
-            currentOffset: this.offset
+            rowsToPush: [ ],
+            currentOffset: this.offset,
+            loadingDelayed: false
         }
     },
     methods: {
@@ -73,6 +88,15 @@ export default {
                 // infinite scrolling
                 this.handler(this.currentOffset, this.limit);
             }
+        },
+        pushRows() {
+            let row = this.rowsToPush.shift();
+            if (row) {
+                this.rows.push(row);
+                setTimeout(() => {
+                    this.pushRows();
+                }, 50);
+            }
         }
     }
 }