From af94b640c51d7501bffe1408df6bcee68bc0cb13 Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@gmail.com>
Date: Thu, 14 Sep 2023 10:28:28 +0700
Subject: [PATCH] UBER-787 Add loading spinner for support button (#3691)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>
---
 .../src/components/AppItem.svelte             | 29 +++++++++++++++----
 .../src/components/Workbench.svelte           | 16 +++++++++-
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 20bc87cfd5..4cd17ac286 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -15,20 +15,33 @@
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
   import type { AnySvelteComponent } from '@hcengineering/ui'
-  import { Icon, tooltip } from '@hcengineering/ui'
+  import { Icon, Loading, tooltip } from '@hcengineering/ui'
 
   export let label: IntlString
   export let icon: Asset | AnySvelteComponent
   export let selected: boolean = false
   export let size: 'small' | 'medium' | 'large' = 'large'
+  export let loading: boolean = false
   export let notify: boolean = false
 </script>
 
-<button class="app {size}" class:selected id={'app-' + label} use:tooltip={{ label }} on:click>
-  <div class="flex-center icon-container" class:noty={notify}>
-    <Icon {icon} size={size === 'small' ? 'small' : 'medium'} />
-  </div>
-  {#if notify}<div class="marker" />{/if}
+<button
+  class="app {size}"
+  class:loading
+  class:selected
+  id={'app-' + label}
+  disabled={loading}
+  use:tooltip={{ label }}
+  on:click
+>
+  {#if loading}
+    <Loading />
+  {:else}
+    <div class="flex-center icon-container" class:noty={notify}>
+      <Icon {icon} size={size === 'small' ? 'small' : 'medium'} />
+    </div>
+    {#if notify}<div class="marker" />{/if}
+  {/if}
 </button>
 
 <style lang="scss">
@@ -42,6 +55,10 @@
     cursor: pointer;
     outline: none;
 
+    &.loading {
+      pointer-events: none;
+    }
+
     &.large {
       width: 2.25rem;
       height: 2.25rem;
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 1298b5334f..25fc9d13fe 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -590,6 +590,19 @@
     await supportClient?.then((support) => support.destroy())
   })
 
+  let supportWidgetLoading = false
+  async function handleToggleSupportWidget (): Promise<void> {
+    const timer = setTimeout(() => {
+      supportWidgetLoading = true
+    }, 100)
+
+    const support = await supportClient
+    await support.toggleWidget()
+
+    clearTimeout(timer)
+    supportWidgetLoading = false
+  }
+
   $: checkInbox($popupstore)
 
   let inboxPopup: PopupResult | undefined = undefined
@@ -682,7 +695,8 @@
               size={appsMini ? 'small' : 'large'}
               notify={supportStatus?.hasUnreadMessages}
               selected={supportStatus?.visible}
-              on:click={() => client.toggleWidget()}
+              loading={supportWidgetLoading}
+              on:click={() => handleToggleSupportWidget()}
             />
           {/if}
         {/await}