Using summaries table for improved performance.

assets/components/search/search.vue

@@ -28,7 +28,12 @@
 		</template>
 
 		<span
-			v-if="!loading && actors.length === 0 && releases.length === 0"
+			v-if="error"
+			class="error summary"
+		>{{ error }}</span>
+
+		<span
+			v-else-if="!loading && actors.length === 0 && releases.length === 0"
 			class="summary"
 		>No results</span>
 	</div>
@@ -39,16 +44,23 @@ import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
 
 async function search() {
-	const results = await this.$store.dispatch('search', {
-		query: this.query,
-		limit: 10,
-	});
+	try {
+		const results = await this.$store.dispatch('search', {
+			query: this.query,
+			limit: 10,
+		});
 
-	this.loading = false;
+		this.loading = false;
 
-	if (results) {
-		this.actors = results.actors;
-		this.releases = results.releases;
+		if (results) {
+			this.actors = results.actors;
+			this.releases = results.releases;
+		}
+	} catch (error) {
+		this.loading = false;
+		this.error = 'Failed to retrieve search results, sorry about that.';
+
+		console.error(error);
 	}
 }
 
@@ -101,6 +113,10 @@ export default {
     margin: 0 0 1rem 0;
     color: var(--shadow);
     font-weight: bold;
+
+	&.error {
+		color: var(--error);
+	}
 }
 
 .tiles {