Update:Home screen server loading to not block local item access #708

components/widgets/ConnectionIndicator.vue

@@ -30,10 +30,15 @@ export default {
     isCellular() {
       return this.networkConnectionType === 'cellular'
     },
+    attemptingConnection() {
+      return this.$store.state.attemptingConnection
+    },
     icon() {
       if (!this.user) return null // hide when not connected to server
 
-      if (!this.networkConnected) {
+      if (this.attemptingConnection) {
+        return 'cloud_sync'
+      } else if (!this.networkConnected) {
         return 'wifi_off'
       } else if (!this.socketConnected) {
         return 'cloud_off'
@@ -55,7 +60,9 @@ export default {
     showAlertDialog() {
       var msg = ''
       var meteredString = this.isNetworkUnmetered ? 'unmetered' : 'metered'
-      if (!this.networkConnected) {
+      if (this.attemptingConnection) {
+        msg = 'Attempting server connection'
+      } else if (!this.networkConnected) {
         msg = 'No internet'
       } else if (!this.socketConnected) {
         msg = 'Socket not connected'

layouts/default.vue

@@ -5,7 +5,7 @@
       <Nuxt />
 
       <div v-if="attemptingConnection" class="absolute top-0 left-0 z-50 w-full h-full flex items-center justify-center">
-        <ui-loading-indicator text="Connecting to server..." />
+        <ui-loading-indicator text="Connecting to server..." class="mt-9" />
       </div>
     </div>
     <app-audio-player-container ref="streamContainer" />
@@ -21,7 +21,6 @@
 export default {
   data() {
     return {
-      attemptingConnection: false,
       inittingLibraries: false,
       hasMounted: false,
       disconnectTime: 0
@@ -72,6 +71,14 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    attemptingConnection: {
+      get() {
+        return this.$store.state.attemptingConnection
+      },
+      set(val) {
+        this.$store.commit('setAttemptingConnection', val)
+      }
     }
   },
   methods: {

pages/bookshelf.vue

@@ -3,10 +3,7 @@
     <home-bookshelf-nav-bar />
     <home-bookshelf-toolbar v-show="!hideToolbar" />
     <div id="bookshelf-wrapper" class="main-content overflow-y-auto overflow-x-hidden relative" :class="hideToolbar ? 'no-toolbar' : ''">
-      <nuxt-child :loading.sync="loading" />
-    </div>
-    <div v-if="loading" class="absolute top-0 left-0 z-50 w-full h-full flex items-center justify-center">
-      <ui-loading-indicator text="Loading..." />
+      <nuxt-child />
     </div>
   </div>
 </template>
@@ -14,9 +11,7 @@
 <script>
 export default {
   data() {
-    return {
-      loading: false
-    }
+    return {}
   },
   computed: {
     hideToolbar() {

pages/bookshelf/index.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="w-full h-full min-h-full relative">
-    <div v-if="!loading" class="w-full" :class="{ 'py-6': altViewEnabled }">
+    <div v-if="shelves.length && isLoading" class="w-full pt-4 flex items-center justify-center">
+      <widgets-loading-spinner />
+      <p class="pl-4">Loading server data...</p>
+    </div>
+
+    <div class="w-full" :class="{ 'py-6': altViewEnabled }">
       <template v-for="(shelf, index) in shelves">
         <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
       </template>
     </div>
 
-    <div v-if="!shelves.length && !loading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+    <div v-if="!shelves.length && !isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
       <div>
         <p class="mb-4 text-center text-xl">
           Bookshelf empty
@@ -26,14 +31,15 @@
         </div>
       </div>
     </div>
+    <div v-else-if="!shelves.length && isLoading && !attemptingConnection" class="absolute top-0 left-0 z-50 w-full h-full flex items-center justify-center">
+      <ui-loading-indicator text="Loading..." />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    loading: Boolean
-  },
+  props: {},
   data() {
     return {
       shelves: [],
@@ -41,7 +47,8 @@ export default {
       lastServerFetch: 0,
       lastServerFetchLibraryId: null,
       lastLocalFetch: 0,
-      localLibraryItems: []
+      localLibraryItems: [],
+      isLoading: false
     }
   },
   watch: {
@@ -97,19 +104,14 @@ export default {
     localMediaProgress() {
       return this.$store.state.globals.localMediaProgress
     },
-    isLoading: {
-      get() {
-        return this.loading
-      },
-      set(val) {
-        this.$emit('update:loading', val)
-      }
+    attemptingConnection() {
+      return this.$store.state.attemptingConnection
     }
   },
   methods: {
-    async getLocalMediaItemCategories() {
-      const localMedia = await this.$db.getLocalLibraryItems()
-      if (!localMedia || !localMedia.length) return []
+    getLocalMediaItemCategories() {
+      const localMedia = this.localLibraryItems
+      if (!localMedia?.length) return []
 
       const categories = []
       const books = []
@@ -198,7 +200,8 @@ export default {
       console.log(`[categories] fetchCategories networkConnected=${this.networkConnected}, lastServerFetch=${this.lastServerFetch}, lastLocalFetch=${this.lastLocalFetch}`)
 
       // TODO: Find a better way to keep the shelf up-to-date with local vs server library because this is a disaster
-      if (this.user && this.currentLibraryId && this.networkConnected) {
+      const isConnectedToServerWithInternet = this.user && this.currentLibraryId && this.networkConnected
+      if (isConnectedToServerWithInternet) {
         if (this.lastServerFetch && Date.now() - this.lastServerFetch < 5000 && this.lastServerFetchLibraryId == this.currentLibraryId) {
           console.log(`[categories] fetchCategories server fetch was ${Date.now() - this.lastServerFetch}ms ago so not doing it.`)
           return
@@ -221,11 +224,14 @@ export default {
       }
 
       this.isLoading = true
-      this.shelves = []
 
-      if (this.user && this.currentLibraryId && this.networkConnected) {
-        this.localLibraryItems = await this.$db.getLocalLibraryItems()
-        const localCategories = await this.getLocalMediaItemCategories()
+      // Set local library items first
+      this.localLibraryItems = await this.$db.getLocalLibraryItems()
+      const localCategories = this.getLocalMediaItemCategories()
+      this.shelves = localCategories
+      console.log('[categories] Local shelves set', this.shelves.length, this.lastLocalFetch)
+
+      if (isConnectedToServerWithInternet) {
         const categories = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/personalized?minified=1`).catch((error) => {
           console.error('[categories] Failed to fetch categories', error)
           return []
@@ -233,7 +239,6 @@ export default {
         if (!categories.length) {
           // Failed to load categories so use local shelves
           console.warn(`[categories] Failed to get server categories so using local categories`)
-          this.shelves = localCategories
           this.lastServerFetch = 0
           this.lastLocalFetch = Date.now()
           this.isLoading = false
@@ -261,12 +266,6 @@ export default {
         const localShelves = localCategories.filter((cat) => cat.type === this.currentLibraryMediaType && !cat.localOnly)
         this.shelves.push(...localShelves)
         console.log('[categories] Server shelves set', this.shelves.length, this.lastServerFetch)
-      } else {
-        // Offline only local
-        this.localLibraryItems = await this.$db.getLocalLibraryItems()
-        const localCategories = await this.getLocalMediaItemCategories()
-        this.shelves = localCategories
-        console.log('[categories] Local shelves set', this.shelves.length, this.lastLocalFetch)
       }
 
       this.isLoading = false

store/index.js

@@ -10,6 +10,7 @@ export const state = () => ({
   playerIsFullscreen: false,
   isCasting: false,
   isCastAvailable: false,
+  attemptingConnection: false,
   socketConnected: false,
   networkConnected: false,
   networkConnectionType: null,
@@ -113,6 +114,9 @@ export const mutations = {
   setCastAvailable(state, available) {
     state.isCastAvailable = available
   },
+  setAttemptingConnection(state, val) {
+    state.attemptingConnection = val
+  },
   setPlayerPlaying(state, val) {
     state.playerIsPlaying = val
   },