add loading state to LibraryList
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<b-overlay :show="filteredNodes === undefined" class="h-100">
|
||||||
<div class="library-list">
|
<div class="library-list">
|
||||||
<div class="library-list-container" @click="onContainerClick">
|
<div class="library-list-container" @click="onContainerClick">
|
||||||
<div v-for="([char, nodes]) in filteredNodes" :key="char">
|
<div v-for="([char, nodes]) in filteredNodes" :key="char">
|
||||||
@@ -19,6 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</b-overlay>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -45,7 +47,7 @@ export default {
|
|||||||
...mapGetters(['orderedTextsDepart', 'search', 'tags', 'strangeness']),
|
...mapGetters(['orderedTextsDepart', 'search', 'tags', 'strangeness']),
|
||||||
|
|
||||||
filteredNodes () {
|
filteredNodes () {
|
||||||
if (!this.orderedTextsDepart) return {}
|
if (!this.orderedTextsDepart) return
|
||||||
const nodesGroups = []
|
const nodesGroups = []
|
||||||
const search = this.search.toLowerCase()
|
const search = this.search.toLowerCase()
|
||||||
this.orderedTextsDepart.forEach(([char, nodes]) => {
|
this.orderedTextsDepart.forEach(([char, nodes]) => {
|
||||||
|
|||||||
@@ -96,10 +96,10 @@ export default {
|
|||||||
const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
|
const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
|
||||||
this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
|
this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
|
||||||
this.nodes = nodes.map((node, i) => {
|
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)
|
this.simulation.nodes(this.nodes)
|
||||||
.force('attract', forceManyBody().strength(10))
|
.force('attract', forceManyBody())
|
||||||
.force('collision', forceCollide().radius(radius / 2))
|
.force('collision', forceCollide().radius(radius / 2))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user