fix(chat): fix typing indicator

src/lib/components/Polling.svelte

@@ -9,7 +9,6 @@
     export let rate: number = 5000
 
     let currentInterval = 100
-    let activeChat = get(Store.state.activeChat)
     async function poll() {
         // add processes here.
         updateTypingIndicators()
@@ -24,7 +23,7 @@
     }
 
     async function updateTypingIndicators() {
-        UIStore.updateTypingIndicators(activeChat)
+        UIStore.updateTypingIndicators()
     }
 
     onMount(() => {

src/lib/components/profile/ProfilePictureMany.svelte

@@ -9,6 +9,7 @@
     export let users: User[]
     export let size: Size = Size.Medium
     export let forceSize: boolean = false
+    export let typing = false
 
     const dispatch = createEventDispatcher()
 
@@ -38,6 +39,9 @@
             <ProfilePicture hook="profile-picture-many-single-pic" id={user.key} size={getSize(i)} image={user.profile.photo.image} status={user.profile.status} noIndicator />
         {/if}
     {/each}
+    {#if typing}
+        <div class="typing-indicator"></div>
+    {/if}
     <div class="count">
         <Icon icon={Shape.Users} size={Size.Smaller} alt />
         <Text hook="profile-picture-many-length" size={Size.Smaller} appearance={Appearance.Alt}>
@@ -88,5 +92,38 @@
                 z-index: 1;
             }
         }
+
+        .typing-indicator {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            min-width: 100%;
+            height: 100%;
+            min-height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            border-top: var(--border-width-more) solid var(--alt-color);
+            border-right: var(--border-width-more) solid var(--alt-color);
+            border-bottom: var(--border-width-more) solid var(--alt-color);
+            border-left: var(--border-width-more) solid var(--color);
+            transform: translateZ(0);
+            animation: circle-loader-spin 1s infinite;
+
+            @keyframes circle-loader-spin {
+                0% {
+                    transform: rotate(-70deg);
+                }
+                50% {
+                    transform: rotate(170deg);
+                }
+                100% {
+                    transform: rotate(-70deg);
+                }
+            }
+        }
     }
 </style>

src/lib/components/ui/ChatIcon.svelte

@@ -28,5 +28,5 @@
         noIndicator={noIndicator}
         loading={loading} />
 {:else}
-    <ProfilePictureMany users={Object.values($users)} size={size} forceSize={forceSize} on:click />
+    <ProfilePictureMany users={Object.values($users)} typing={chat.typing_indicator.size > 0} size={size} forceSize={forceSize} on:click />
 {/if}

src/lib/state/ui/index.ts

@@ -170,23 +170,17 @@ class Store {
         }, 0)
     }
 
-    updateTypingIndicators(chat: Chat) {
-        let update = chat.typing_indicator.size !== 0
-        chat.typing_indicator.update()
-        if (update) {
-            this.state.chats.update(chats => chats.map(c => (c.id === chat.id ? { ...c, typing_indicator: chat.typing_indicator } : c)))
-
-            MainStore.state.activeChat.update(c => {
-                if (c.id === chat.id) {
-                    return {
-                        ...c,
-                        typing_indicator: chat.typing_indicator,
-                    }
-                }
-                return c
-            })
-            chat.typing_indicator.update()
+    updateTypingIndicators() {
+        let chats = get(this.state.chats)
+        let updated = false
+        for (let chat of chats) {
+            if (chat.typing_indicator.update()) updated = true
+        }
+        if (updated) {
+            this.state.chats.set(chats)
         }
+        let active = get(MainStore.state.activeChat)
+        if (active.typing_indicator.update()) MainStore.state.activeChat.set(active)
     }
 
     useEmoji(emoji: string) {

src/lib/types/index.ts

@@ -233,6 +233,7 @@ export class TypingIndicator {
      * @returns True if something changed
      */
     update(): boolean {
+        if (this.size === 0) return false
         let time = new Date()
         time.setSeconds(time.getSeconds() - 5)
         let it = Object.entries(this.typingIndicator)
@@ -242,7 +243,7 @@ export class TypingIndicator {
             obj[id] = date
             return obj
         }, {})
-        this._size = updated.length > 0 ? 1 : 0
+        this._size = updated.length
         return old_len != this._size
     }