diff --git a/packages/ui/src/components/Loading.svelte b/packages/ui/src/components/Loading.svelte
index 1916a9045c..b6ddabc326 100644
--- a/packages/ui/src/components/Loading.svelte
+++ b/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;
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index f3aeb14ef6..095d11bf2c 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/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%;