From f5127f98f644a0df1554dcdc8da013268f63e693 Mon Sep 17 00:00:00 2001
From: ivelin <ivelin@ambianic.ai>
Date: Fri, 5 Feb 2021 07:53:28 +0000
Subject: [PATCH] fix: on a brand new install timeline doesn't auto refresh

---
 package-lock.json           |  2 +-
 src/components/AppFrame.vue |  4 ++--
 src/views/Home.vue          |  4 ++--
 src/views/Timeline.vue      | 32 ++++++++++++++++----------------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aae3e76c..ed765b8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ambianic-ui",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/AppFrame.vue b/src/components/AppFrame.vue
index 5a6b8690..89bb0d6b 100644
--- a/src/components/AppFrame.vue
+++ b/src/components/AppFrame.vue
@@ -4,7 +4,7 @@
     <!-- nav goes here -->
     <NavBar />
 
-    <v-content>
+    <v-main>
       <v-container
         id="container"
         class="pa-0 ma-0"
@@ -14,7 +14,7 @@
           <p>App page content goes here...</p>
         </slot>
       </v-container>
-    </v-content>
+    </v-main>
 
     <v-footer
       app
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a04b3239..35b929e1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content class="body">
+  <v-main class="body">
     <v-container
       id="container"
       fluid
@@ -77,7 +77,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 76542718..43849daf 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -65,9 +65,9 @@
         class="pa-0 ma-0"
       >
         <infinite-loading
-          v-if="!isBottomSpinnerVisible"
           direction="top"
           @infinite="infiniteHandlerTop"
+          v-observe-visibility="topSpinnerVisibilityChanged"
         >
           <span slot="no-more">
             There are no new timeline events.
@@ -145,9 +145,9 @@
                 >
                   <v-col cols="7">
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
-                          v-on="on"
+                          v-on="tooltip"
                           fab
                           color="success lighten-2"
                           class="mx-2"
@@ -158,9 +158,9 @@
                       <span>Looks fine</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
-                          v-on="on"
+                          v-on="tooltip"
                           color="error lighten-2"
                           fab
                           class="mx-2"
@@ -173,10 +173,10 @@
                   </v-col>
                   <v-col cols="1">
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-heart</v-icon>
                         </v-btn>
@@ -184,10 +184,10 @@
                       <span>Save to Favorites</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-pen</v-icon>
                         </v-btn>
@@ -195,10 +195,10 @@
                       <span>Edit event details</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-share-variant</v-icon>
                         </v-btn>
@@ -257,7 +257,7 @@
         </v-list-item>
         <infinite-loading
           @infinite="infiniteHandlerBottom"
-          v-observe-visibility="bottomSpinnerVisibilityChanged"
+          v-if="!isTopSpinnerVisible"
         >
           <span slot="no-more">
             There are no more timeline events.
@@ -295,7 +295,7 @@ export default {
       imageURL: {}, // map[id, fullURL] - maps unique event id to their full thumbnail URLs
       isImageLoaded: [],
       on: true,
-      isBottomSpinnerVisible: false // flags whether the timeline is in the process of loading data
+      isTopSpinnerVisible: true // flags whether the timeline is in the process of loading data
     }
   },
   created () {
@@ -353,9 +353,9 @@ export default {
       console.debug('getNextTimelinePage received data', { timelineEvents }) // eslint-disable-line no-console
       return timelineEvents
     },
-    async bottomSpinnerVisibilityChanged (isVisible, entry) {
-      this.isBottomSpinnerVisible = isVisible
-      console.debug(`bottomSpinnerVisibilityChanged: ${isVisible}`) // eslint-disable-line no-console
+    async topSpinnerVisibilityChanged (isVisible, entry) {
+      this.isTopSpinnerVisible = isVisible
+      console.debug(`topSpinnerVisibilityChanged: ${isVisible}`) // eslint-disable-line no-console
     },
     async infiniteHandlerTop ($state) {
       try {