diff --git a/components/widgets/ConnectionIndicator.vue b/components/widgets/ConnectionIndicator.vue
index 5305873a..b246037d 100644
--- a/components/widgets/ConnectionIndicator.vue
+++ b/components/widgets/ConnectionIndicator.vue
@@ -34,7 +34,7 @@ export default {
       return this.$store.state.attemptingConnection
     },
     icon() {
-      if (!this.user) return null // hide when not connected to server
+      if (!this.user && !this.attemptingConnection) return null // hide when not connected to server
 
       if (this.attemptingConnection) {
         return 'cloud_sync'
diff --git a/layouts/default.vue b/layouts/default.vue
index e8223261..202f73ac 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,10 +3,6 @@
     <app-appbar />
     <div id="content" class="overflow-hidden relative" :class="isPlayerOpen ? '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..." class="mt-9" />
-      </div>
     </div>
     <app-audio-player-container ref="streamContainer" />
     <modals-libraries-modal />
diff --git a/pages/bookshelf/index.vue b/pages/bookshelf/index.vue
index 61ef8f84..e8f4d46f 100644
--- a/pages/bookshelf/index.vue
+++ b/pages/bookshelf/index.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="w-full h-full min-h-full relative">
+    <div v-if="attemptingConnection" class="w-full pt-4 flex items-center justify-center">
+      <widgets-loading-spinner />
+      <p class="pl-4">Attempting server connection...</p>
+    </div>
     <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>