diff --git a/pages/bookshelf/index.vue b/pages/bookshelf/index.vue
index c41ddfc6..47701b14 100644
--- a/pages/bookshelf/index.vue
+++ b/pages/bookshelf/index.vue
@@ -1,14 +1,5 @@
 <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">{{ $strings.MessageAttemptingServerConnection }}</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">{{ $strings.MessageLoadingServerData }}</p>
-    </div>
-
     <div class="w-full" :class="{ 'py-6': altViewEnabled }">
       <template v-for="(shelf, index) in shelves">
         <bookshelf-shelf :key="shelf.id" :label="getShelfLabel(shelf)" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
@@ -74,6 +65,20 @@ export default {
         console.log(`[categories] networkConnected false so fetching categories`)
         this.fetchCategories()
       }
+    },
+    attemptingConnection(newVal) {
+      if (newVal) {
+        this.$toast.info(this.$strings.MessageAttemptingServerConnection, { timeout: 0, id: 1 })
+      } else {
+        this.$toast.dismiss(1)
+      }
+    },
+    isLoading(newVal) {
+      if (newVal && this.shelves.length) {
+        this.$toast.success(this.$strings.MessageLoadingServerData, { timeout: 0, id: 2 })
+      } else {
+        this.$toast.dismiss(2)
+      }
     }
   },
   computed: {