Closes #950 (#957)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/Loading.svelte

@@ -39,7 +39,7 @@
 
 .spinner-container .inner {
   margin: auto;
-  opacity: 0;
+  opacity: 0.5;
   animation-name: makeVisible;
   animation-duration: 0.25s;
   animation-delay: 0.1s;

plugins/view-resources/src/components/Table.svelte

@@ -36,6 +36,7 @@
   let sortKey = 'modifiedOn'
   let sortOrder = SortingOrder.Descending
   let selectRow: number | undefined = undefined
+  let loading = false
 
   let objects: Doc[]
 
@@ -48,11 +49,13 @@
     sortOrder: SortingOrder,
     options?: FindOptions<Doc>
   ) {
+    loading = true
     q.query(
       _class,
       query,
       (result) => {
         objects = result
+        loading = false
       },
       { sort: { [sortKey]: sortOrder }, ...options, limit: 200 }
     )
@@ -116,7 +119,9 @@
 </script>
 
 {#await buildModel({ client, _class, keys: config, options })}
-  <Loading />
+  {#if !loading}
+    <Loading />
+  {/if}
 {:then model}
   <table class="table-body" class:enableChecking>
     <thead>
@@ -223,6 +228,10 @@
   </table>
 {/await}
 
+{#if loading}
+  <Loading/>
+{/if}
+
 <style lang="scss">
   .table-body {
     width: 100%;