From c814e51e36456cff5ee1ef95370296050153e212 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 22 Sep 2023 14:03:23 +0200
Subject: [PATCH] Display loader

---
 packages/bbui/src/Form/Core/Multiselect.svelte        |  2 ++
 packages/bbui/src/Form/Core/Picker.svelte             | 11 +++++++++++
 packages/bbui/src/Form/Core/Select.svelte             |  2 ++
 .../src/components/app/forms/RelationshipField.svelte |  1 +
 4 files changed, 16 insertions(+)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 4d7b7537c9..9b795bc7e5 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -20,6 +20,7 @@
   export let customPopoverOffsetBelow
   export let customPopoverMaxHeight
   export let open = false
+  export let loading
 
   const dispatch = createEventDispatcher()
 
@@ -103,4 +104,5 @@
   {customPopoverHeight}
   {customPopoverOffsetBelow}
   {customPopoverMaxHeight}
+  {loading}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 2fc18b6a64..d2ee81f8fe 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -10,6 +10,7 @@
   import Popover from "../../Popover/Popover.svelte"
   import Tags from "../../Tags/Tags.svelte"
   import Tag from "../../Tags/Tag.svelte"
+  import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
 
   export let id = null
   export let disabled = false
@@ -43,6 +44,7 @@
   export let align = "left"
   export let footer = null
   export let customAnchor = null
+  export let loading
 
   const dispatch = createEventDispatcher()
 
@@ -260,6 +262,11 @@
           </li>
         {/each}
       {/if}
+      {#if loading}
+        <li class="spectrum-Menu-item loading">
+          <ProgressCircle size="S" />
+        </li>
+      {/if}
     </ul>
 
     {#if footer}
@@ -373,4 +380,8 @@
   .option-tag :global(.spectrum-Tags-item > .spectrum-Icon) {
     margin-top: 2px;
   }
+
+  .loading {
+    justify-content: center;
+  }
 </style>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index e34fc869ed..a85d4094c5 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -26,6 +26,7 @@
   export let customPopoverOffsetBelow
   export let customPopoverMaxHeight
   export let searchTerm = null
+  export let loading
 
   const dispatch = createEventDispatcher()
 
@@ -95,4 +96,5 @@
   placeholderOption={placeholder === false ? null : placeholder}
   isOptionSelected={option => option === value}
   onSelectOption={selectOption}
+  {loading}
 />
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 7e22d9c45e..3e09136a29 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -154,6 +154,7 @@
       sort
       useFetch={false}
       bind:searchTerm
+      loading={$fetch.loading}
     />
   {/if}
 </Field>