From 735de553d2330d48b58045a820af9b61fbe3d832 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 8 Oct 2020 12:21:05 +0100
Subject: [PATCH] Update linked record selector to handle errors and remove
 loading state flashing

---
 .../common/LinkedRecordSelector.svelte        | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte
index 8b20a8e3ac..e7cf245eb8 100644
--- a/packages/builder/src/components/common/LinkedRecordSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte
@@ -8,17 +8,24 @@
   export let schema
   export let linkedRecords = []
 
+  let records = []
+
   $: label = capitalise(schema.name)
   $: linkedModelId = schema.modelId
   $: linkedModel = $backendUiStore.models.find(
     model => model._id === linkedModelId
   )
-  $: promise = fetchRecords(linkedModelId)
+  $: fetchRecords(linkedModelId)
 
   async function fetchRecords(linkedModelId) {
     const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
-    const response = await api.get(FETCH_RECORDS_URL)
-    return await response.json()
+    try {
+      const response = await api.get(FETCH_RECORDS_URL)
+      records = await response.json()
+    } catch (error) {
+      console.log(error)
+      records = []
+    }
   }
 
   function getPrettyName(record) {
@@ -34,15 +41,13 @@
     table.
   </Label>
 {:else}
-  {#await promise then records}
-    <Multiselect
-      secondary
-      bind:value={linkedRecords}
-      {label}
-      placeholder="Choose some options">
-      {#each records as record}
-        <option value={record._id}>{getPrettyName(record)}</option>
-      {/each}
-    </Multiselect>
-  {/await}
+  <Multiselect
+    secondary
+    bind:value={linkedRecords}
+    {label}
+    placeholder="Choose some options">
+    {#each records as record}
+      <option value={record._id}>{getPrettyName(record)}</option>
+    {/each}
+  </Multiselect>
 {/if}