From 6a5b169411db7b000c5f9739796e0e11244c8f3a Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Sat, 15 Feb 2025 16:52:28 +0700
Subject: [PATCH] QFix: Load spinner (#8014)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 dev/prod/public/config-worker.json            | 28 ++----------------
 .../presentation/src/components/Image.svelte  | 29 +++++++++++--------
 packages/ui/src/components/Image.svelte       | 27 +++++++++++++----
 .../components/AttachmentImagePreview.svelte  |  3 +-
 4 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/dev/prod/public/config-worker.json b/dev/prod/public/config-worker.json
index 56985b9199..a8056e3d04 100644
--- a/dev/prod/public/config-worker.json
+++ b/dev/prod/public/config-worker.json
@@ -1,52 +1,30 @@
 {
   "ACCOUNTS_URL": "https://account.hc.engineering/",
-
   "AI_URL": "https://ai.hc.engineering",
-  
   "ANALYTICS_COLLECTOR_URL": "https://collector.hc.engineering",
-  
   "BRANDING_URL": "https://front.hc.engineering/stage-branding_v2.json",
-  
   "CALENDAR_URL": "https://calendar.hc.engineering/",
-  
   "COLLABORATOR_URL": "wss://collaborator.hc.engineering",
-  
   "DESKTOP_UPDATES_CHANNEL": "front",
-  
   "FILES_URL": "https://dl.hc.engineering/blob/:workspace/:blobId/:filename",
-  
   "GITHUB_APP": "huly-github-staging",
-  
-  "GITHUB_CLIENTID": "Iv1.cd9d3f7987474b5e" ,
-  
+  "GITHUB_CLIENTID": "Iv1.cd9d3f7987474b5e",
   "GITHUB_URL": "https://github.hc.engineering",
-  
-  "GMAIL_URL": "https://gmail.hc.engineering/" ,
-  
+  "GMAIL_URL": "https://gmail.hc.engineering/",
   "INTERCOM_API_URL": "",
-  
   "INTERCOM_APP_ID": "",
-    
   "LOVE_ENDPOINT": "https://love.hc.engineering/",
-  
   "MODEL_VERSION": "",
   
   "PREVIEW_CONFIG": "image|https://dl.hc.engineering/image/fit=scale-down,width=:width,height=:height,dpr=:dpr/:workspace/:blobId;video|https://dl.hc.engineering/video/:workspace/:blobId/meta",
   
   "PRINT_URL": "https://print.hc.engineering",
-    
   "REKONI_URL": "https://rekoni.hc.engineering",
-  
   "SIGN_URL": "https://sign.hc.engineering",
-  
   "STATS_URL": "https://stats.hc.engineering",
-  
   "TELEGRAM_BOT_URL": "https://telegram-bot.hc.engineering",
-  
   "TELEGRAM_URL": "https://telegram.hc.engineering",
-  
   "UPLOAD_CONFIG": "",
-  
   "UPLOAD_URL": "https://dl.hc.engineering/upload/form-data/:workspace",
-  "TRANSACTOR_OVERRIDE": "ws://localhost:3335"
+  "TRANSACTOR_OVERRIDE": "wss://transactor00.hc.engineering"
 }
\ No newline at end of file
diff --git a/packages/presentation/src/components/Image.svelte b/packages/presentation/src/components/Image.svelte
index 305766a251..1bbd2ea0ed 100644
--- a/packages/presentation/src/components/Image.svelte
+++ b/packages/presentation/src/components/Image.svelte
@@ -23,17 +23,22 @@
   export let width: number
   export let height: number
   export let responsive: boolean = false
+
+  let blobSrc: { src: string, srcset: string } | undefined
+
+  $: void getBlobRef(blob, alt, width, height).then((val) => {
+    blobSrc = val
+  })
 </script>
 
-{#await getBlobRef(blob, alt, width, height) then blobSrc}
-  <Image
-    src={blobSrc.src}
-    srcset={blobSrc.srcset}
-    {alt}
-    width={responsive ? '100%' : width}
-    height={responsive ? '100%' : height}
-    {fit}
-    on:load
-    on:error
-  />
-{/await}
+<Image
+  src={blobSrc?.src}
+  srcset={blobSrc?.srcset}
+  {alt}
+  width={responsive ? '100%' : width}
+  height={responsive ? '100%' : height}
+  {fit}
+  on:load
+  on:error
+  on:loadstart
+/>
diff --git a/packages/ui/src/components/Image.svelte b/packages/ui/src/components/Image.svelte
index b5ac78abf9..c9b97e4ebf 100644
--- a/packages/ui/src/components/Image.svelte
+++ b/packages/ui/src/components/Image.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
 
-  export let src: string
+  export let src: string | undefined
   export let srcset: string | undefined = undefined
   export let alt: string = ''
   export let width: number | string
@@ -26,15 +26,20 @@
 
   let retry: number = 0
 
-  $: if (src !== undefined) {
-    retry = 0
-  }
-
   function handleLoad (): void {
     retry = 0
     dispatch('load')
   }
 
+  function handleLoadStart (): void {
+    dispatch('loadstart')
+  }
+
+  $: if (src !== undefined) {
+    retry = 0
+    handleLoadStart()
+  }
+
   function handleError (event: any): void {
     if (retry > 3) {
       event.target.src = undefined
@@ -47,7 +52,17 @@
   }
 </script>
 
-<img {src} {srcset} {alt} {width} {height} style:object-fit={fit} on:error={handleError} on:load={handleLoad} />
+<img
+  {src}
+  {srcset}
+  {alt}
+  {width}
+  {height}
+  style:object-fit={fit}
+  on:error={handleError}
+  on:loadstart={handleLoadStart}
+  on:load={handleLoad}
+/>
 
 <style lang="scss">
   img {
diff --git a/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte b/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
index 3c39ba9d3d..7a8c2bd7fd 100644
--- a/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
@@ -100,7 +100,7 @@
   let loading = false
   let error = false
 
-  $: if (value !== undefined) {
+  function handleLoadStart (): void {
     loading = true
   }
 
@@ -135,6 +135,7 @@
     height={dimensions.height}
     on:load={handleLoad}
     on:error={handleError}
+    on:loadstart={handleLoadStart}
   />
 </div>