add loading state to LibraryList

src/pages/library/LibraryList.vue

@@ -1,24 +1,26 @@
 <template>
-  <div class="library-list">
+  <b-overlay :show="filteredNodes === undefined" class="h-100">
-    <div class="library-list-container" @click="onContainerClick">
+    <div class="library-list">
-      <div v-for="([char, nodes]) in filteredNodes" :key="char">
+      <div class="library-list-container" @click="onContainerClick">
-        <h3>{{ char }}</h3>
+        <div v-for="([char, nodes]) in filteredNodes" :key="char">
+          <h3>{{ char }}</h3>
 
-        <div class="library-list-nodes-group">
+          <div class="library-list-nodes-group">
-          <node-view
+            <node-view
-            v-for="node in nodes" :key="char + '-' + node.id"
+              v-for="node in nodes" :key="char + '-' + node.id"
-            :node="node"
+              :node="node"
-            mode="card"
+              mode="card"
-            @click.native.capture="previewNode = node"
+              @click.native.capture="previewNode = node"
-            :preview="previewNode === node"
+              :preview="previewNode === node"
-            @open-node="$emit('open-node', $event)"
+              @open-node="$emit('open-node', $event)"
-            @open-child="$emit('open-node', { parentId: node.id, ...$event })"
+              @open-child="$emit('open-node', { parentId: node.id, ...$event })"
-            :style="`--opacity: ${getStrangenessOpacity(strangeness, node)};`"
+              :style="`--opacity: ${getStrangenessOpacity(strangeness, node)};`"
-          />
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </b-overlay>
 </template>
 
 <script>
@@ -45,7 +47,7 @@ export default {
     ...mapGetters(['orderedTextsDepart', 'search', 'tags', 'strangeness']),
 
     filteredNodes () {
-      if (!this.orderedTextsDepart) return {}
+      if (!this.orderedTextsDepart) return
       const nodesGroups = []
       const search = this.search.toLowerCase()
       this.orderedTextsDepart.forEach(([char, nodes]) => {

src/pages/library/LibraryMap.vue

@@ -96,10 +96,10 @@ export default {
     const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
     this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
       this.nodes = nodes.map((node, i) => {
-        return { x: i, rotate: randomUniform(-25, 25)(), data: node }
+        return { x: 0, rotate: randomUniform(-25, 25)(), data: node }
       })
       this.simulation.nodes(this.nodes)
-        .force('attract', forceManyBody().strength(10))
+        .force('attract', forceManyBody())
         .force('collision', forceCollide().radius(radius / 2))
     })
   }