From 8af5279a5339fc9b3be17b567ed813e1bbadd93e Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Fri, 26 Apr 2024 08:46:06 +0700
Subject: [PATCH] UBERF-6728 Show spinner while teamspace not loaded (#5472)

---
 .../src/components/NewDocumentHeader.svelte   | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/plugins/document-resources/src/components/NewDocumentHeader.svelte b/plugins/document-resources/src/components/NewDocumentHeader.svelte
index 51152086ec..99e6649671 100644
--- a/plugins/document-resources/src/components/NewDocumentHeader.svelte
+++ b/plugins/document-resources/src/components/NewDocumentHeader.svelte
@@ -15,7 +15,15 @@
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, showPopup, IconAdd, ButtonWithDropdown, SelectPopupValueType, IconDropdown } from '@hcengineering/ui'
+  import {
+    Button,
+    ButtonWithDropdown,
+    IconAdd,
+    IconDropdown,
+    Loading,
+    SelectPopupValueType,
+    showPopup
+  } from '@hcengineering/ui'
   import { openDoc } from '@hcengineering/view-resources'
   import document from '../plugin'
   import { getDocumentIdFromFragment } from '../utils'
@@ -28,12 +36,14 @@
   const client = getClient()
   const query = createQuery()
 
+  let loading = true
   let hasTeamspace = false
   query.query(
     document.class.Teamspace,
     { archived: false },
     (res) => {
       hasTeamspace = res.length > 0
+      loading = false
     },
     { limit: 1, projection: { _id: 1 } }
   )
@@ -64,34 +74,38 @@
   }
 </script>
 
-<div class="antiNav-subheader">
-  {#if hasTeamspace}
-    <ButtonWithDropdown
-      icon={IconAdd}
-      justify={'left'}
-      kind={'primary'}
-      label={document.string.CreateDocument}
-      on:click={newDocument}
-      mainButtonId={'new-document'}
-      dropdownIcon={IconDropdown}
-      dropdownItems={[
-        { id: document.string.CreateDocument, label: document.string.CreateDocument },
-        { id: document.string.CreateTeamspace, label: document.string.CreateTeamspace }
-      ]}
-      on:dropdown-selected={(ev) => {
-        void dropdownItemSelected(ev.detail)
-      }}
-    />
-  {:else}
-    <Button
-      id={'new-teamspace'}
-      icon={IconAdd}
-      label={document.string.CreateTeamspace}
-      justify={'left'}
-      width={'100%'}
-      kind={'primary'}
-      gap={'large'}
-      on:click={newTeamspace}
-    />
-  {/if}
-</div>
+{#if loading}
+  <Loading shrink />
+{:else}
+  <div class="antiNav-subheader">
+    {#if hasTeamspace}
+      <ButtonWithDropdown
+        icon={IconAdd}
+        justify={'left'}
+        kind={'primary'}
+        label={document.string.CreateDocument}
+        on:click={newDocument}
+        mainButtonId={'new-document'}
+        dropdownIcon={IconDropdown}
+        dropdownItems={[
+          { id: document.string.CreateDocument, label: document.string.CreateDocument },
+          { id: document.string.CreateTeamspace, label: document.string.CreateTeamspace }
+        ]}
+        on:dropdown-selected={(ev) => {
+          void dropdownItemSelected(ev.detail)
+        }}
+      />
+    {:else}
+      <Button
+        id={'new-teamspace'}
+        icon={IconAdd}
+        label={document.string.CreateTeamspace}
+        justify={'left'}
+        width={'100%'}
+        kind={'primary'}
+        gap={'large'}
+        on:click={newTeamspace}
+      />
+    {/if}
+  </div>
+{/if}