Display loader

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}
 />

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>

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}
 />

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -154,6 +154,7 @@
       sort
       useFetch={false}
       bind:searchTerm
+      loading={$fetch.loading}
     />
   {/if}
 </Field>