Load list background in list card

src/components/list/partials/list-card.vue

@@ -2,16 +2,16 @@
 	<router-link
 		:class="{
 			'has-light-text': !colorIsDark(list.hexColor),
-			'has-background': backgroundResolver(list.id) !== null
+			'has-background': background !== null
 		}"
 		:style="{
 			'background-color': list.hexColor,
-			'background-image': backgroundResolver(list.id) !== null ? `url(${backgroundResolver(list.id)})` : false,
+			'background-image': background !== null ? `url(${background})` : false,
 		}"
 		:to="{ name: 'list.index', params: { listId: list.id} }"
 		class="list-card"
 		tag="span"
-		v-if="showArchived ? true : !list.isArchived"
+		v-if="list !== null && (showArchived ? true : !list.isArchived)"
 	>
 		<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
@@ -30,8 +30,16 @@
 </template>
 
 <script>
+import ListService from '@/services/list'
+
 export default {
 	name: 'list-card',
+	data() {
+		return {
+			background: null,
+			backgroundLoading: false,
+		}
+	},
 	props: {
 		list: {
 			required: true,
@@ -40,13 +48,33 @@ export default {
 			default: false,
 			type: Boolean,
 		},
-		// A function, returning a background blob or null if none exists for that list.
+	},
-		// Receives the list id as parameter.
+	watch: {
-		backgroundResolver: {
+		list() {
-			required: true,
+			this.loadBackground()
 		},
 	},
+	created() {
+		this.loadBackground()
+	},
 	methods: {
+		loadBackground() {
+			if (this.list === null || !this.list.backgroundInformation || this.backgroundLoading) {
+				return
+			}
+
+			this.backgroundLoading = true
+
+			const listService = new ListService()
+			listService.background(this.list)
+				.then(b => {
+					this.$set(this, 'background', b)
+				})
+				.catch(e => {
+					this.error(e)
+				})
+				.finally(() => this.backgroundLoading = false)
+		},
 		toggleFavoriteList(list) {
 			// The favorites pseudo list is always favorite
 			// Archived lists cannot be marked favorite

src/views/namespaces/ListNamespaces.vue

@@ -58,7 +58,6 @@
 					:key="`l${l.id}`"
 					:list="l"
 					:show-archived="showArchived"
-					:background-resolver="lId =>  typeof backgrounds[lId] !== 'undefined' ? backgrounds[lId] : null"
 				/>
 			</div>
 		</div>
@@ -67,7 +66,6 @@
 
 <script>
 import {mapState} from 'vuex'
-import ListService from '../../services/list'
 import Fancycheckbox from '../../components/input/fancycheckbox'
 import {LOADING} from '@/store/mutation-types'
 import ListCard from '@/components/list/partials/list-card'
@@ -81,13 +79,10 @@ export default {
 	data() {
 		return {
 			showArchived: false,
-			// listId is the key, the object is the background blob
-			backgrounds: {},
 		}
 	},
 	created() {
 		this.showArchived = JSON.parse(localStorage.getItem('showArchived')) ?? false
-		this.loadBackgroundsForLists()
 	},
 	mounted() {
 		this.setTitle(this.$t('namespace.title'))
@@ -99,22 +94,6 @@ export default {
 		loading: LOADING,
 	}),
 	methods: {
-		loadBackgroundsForLists() {
-			const listService = new ListService()
-			this.namespaces.forEach(n => {
-				n.lists.forEach(l => {
-					if (l.backgroundInformation) {
-						listService.background(l)
-							.then(b => {
-								this.$set(this.backgrounds, l.id, b)
-							})
-							.catch(e => {
-								this.error(e)
-							})
-					}
-				})
-			})
-		},
 		saveShowArchivedState() {
 			localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
 		},