Update:Show loading indicator when first connecting to server

components/app/AudioPlayerContainer.vue

@@ -269,13 +269,12 @@ export default {
     onReady() {
       // The UI is reporting elsewhere we are ready
       this.isReady = true
-
-      // TODO: iOS opens last active playback session on app launch. Should be consistent with Android
-      if (this.isIos) {
-        this.notifyOnReady()
-      }
+      this.notifyOnReady()
     },
     notifyOnReady() {
+      // TODO: iOS opens last active playback session on app launch. Should be consistent with Android
+      if (!this.isIos) return
+
       // If settings aren't loaded yet, native player will receive incorrect settings
       console.log('Notify on ready... settingsLoaded:', this.settingsLoaded, 'isReady:', this.isReady)
       if (this.settingsLoaded && this.isReady && this.$store.state.isFirstAudioLoad) {

layouts/default.vue

@@ -3,6 +3,10 @@
     <app-appbar />
     <div id="content" class="overflow-hidden relative" :class="playerIsOpen ? 'playerOpen' : ''">
       <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..." />
+      </div>
     </div>
     <app-audio-player-container ref="streamContainer" />
     <modals-libraries-modal />

pages/bookshelf.vue

@@ -3,7 +3,10 @@
     <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 />
+      <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..." />
     </div>
   </div>
 </template>
@@ -11,7 +14,9 @@
 <script>
 export default {
   data() {
-    return {}
+    return {
+      loading: false
+    }
   },
   computed: {
     hideToolbar() {

pages/bookshelf/index.vue

@@ -26,18 +26,17 @@
         </div>
       </div>
     </div>
-    <div v-if="loading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-      <ui-loading-indicator text="Loading Library..." />
-    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    loading: Boolean
+  },
   data() {
     return {
       shelves: [],
-      loading: false,
       isFirstNetworkConnection: true,
       lastServerFetch: 0,
       lastServerFetchLibraryId: null,
@@ -97,6 +96,14 @@ export default {
     },
     localMediaProgress() {
       return this.$store.state.globals.localMediaProgress
+    },
+    isLoading: {
+      get() {
+        return this.loading
+      },
+      set(val) {
+        this.$emit('update:loading', val)
+      }
     }
   },
   methods: {
@@ -213,7 +220,7 @@ export default {
         }
       }
 
-      this.loading = true
+      this.isLoading = true
       this.shelves = []
 
       if (this.user && this.currentLibraryId && this.networkConnected) {
@@ -229,7 +236,7 @@ export default {
           this.shelves = localCategories
           this.lastServerFetch = 0
           this.lastLocalFetch = Date.now()
-          this.loading = false
+          this.isLoading = false
           console.log('[categories] Local shelves set from failure', this.shelves.length, this.lastLocalFetch)
           return
         }
@@ -267,7 +274,7 @@ export default {
         console.log('[categories] Local shelves set', this.shelves.length, this.lastLocalFetch)
       }
 
-      this.loading = false
+      this.isLoading = false
     },
     openMediaPlayerWithMostRecentListening() {
       // If we don't already have a player open