Show progress while gpt do calculations (#2538)

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

packages/text-editor/src/components/ReferenceInput.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { getResource, IntlString, Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { Button, Icon, showPopup, tooltip } from '@hcengineering/ui'
+  import { Button, Icon, showPopup, Spinner, tooltip } from '@hcengineering/ui'
   import type { AnySvelteComponent } from '@hcengineering/ui'
   import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
@@ -51,6 +51,7 @@
   export let withoutTopBorder = false
   export let placeholder: IntlString | undefined = undefined
   export let extraActions: RefAction[] | undefined = undefined
+  export let loading: boolean = false
   const client = getClient()
 
   let textEditor: TextEditor
@@ -299,9 +300,17 @@
         class="sendButton"
         on:click={submit}
         use:tooltip={{ label: labelSend ?? textEditorPlugin.string.Send }}
-        disabled={isEmpty && !haveAttachment}
+        disabled={(isEmpty && !haveAttachment) || loading}
       >
-        <div class="icon"><Icon icon={iconSend ?? Send} size={'medium'} /></div>
+        <div class="icon">
+          {#if loading}
+            <div class="pointer-events-none spinner">
+              <Spinner size={'medium'} />
+            </div>
+          {:else}
+            <Icon icon={iconSend ?? Send} size={'medium'} />
+          {/if}
+        </div>
       </button>
     {/if}
   </div>

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -34,6 +34,7 @@
   export let showSend = true
   export let shouldSaveDraft: boolean = false
   export let attachments: IdMap<Attachment> = new Map()
+  export let loading = false
   export function submit (): void {
     refInput.submit()
   }
@@ -208,6 +209,7 @@
   }
 
   async function onMessage (event: CustomEvent) {
+    loading = true
     await createAttachments()
     dispatch('message', { message: event.detail, attachments: attachments.size })
   }
@@ -281,6 +283,7 @@
       {iconSend}
       {labelSend}
       {showSend}
+      {loading}
       on:message={onMessage}
       haveAttachment={attachments.size > 0}
       withoutTopBorder={attachments.size > 0}

plugins/chunter-resources/src/components/CommentInput.svelte

@@ -108,7 +108,11 @@
     return newDraft
   }
 
+  let loading = false
+
   async function onMessage (event: CustomEvent) {
+    loading = true
+    try {
       const { message, attachments } = event.detail
       await client.addCollection<Doc, Comment>(
         _class,
@@ -128,6 +132,9 @@
       draftComment = undefined
       await saveDraft(object)
       commentInputBox.removeDraft(false)
+    } finally {
+      loading = false
+    }
   }
 </script>
 
@@ -140,4 +147,5 @@
   {shouldSaveDraft}
   on:message={onMessage}
   on:update={onUpdate}
+  {loading}
 />

plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte

@@ -33,6 +33,8 @@
   const editing = false
 
   async function onMessage (event: CustomEvent<AttachedData<Comment>>) {
+    loading = true
+    try {
       const { message, attachments } = event.detail
       await client.updateCollection(
         tx.objectClass,
@@ -48,15 +50,19 @@
       )
       // We need to update backlinks before and after.
       await updateBacklinks(client, value.attachedTo, value.attachedToClass, value._id, message)
-
+    } finally {
+      loading = false
+    }
     dispatch('close', false)
   }
   let refInput: AttachmentRefInput
+  let loading = false
 </script>
 
 <div class:editing class="content-accent-color">
   {#if edit}
     <AttachmentRefInput
+      {loading}
       bind:this={refInput}
       _class={value._class}
       objectId={value._id}