wip: optimizations

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html

@@ -3,7 +3,7 @@
   class="chat-layout relative h-full"
 >
   <app-chat-message-list
-    [allMessages]="allMessages()"
+    [allMessages]="roomMessages()"
     [channelMessages]="channelMessages()"
     [loading]="loading()"
     [syncing]="syncing()"

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.ts

@@ -19,7 +19,8 @@ import { Attachment, AttachmentFacade } from '../../../attachment';
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
 import { MessagesActions } from '../../../../store/messages/messages.actions';
 import {
-  selectAllMessages,
+  selectActiveChannelMessages,
+  selectCurrentRoomMessages,
   selectConversationExhausted,
   selectMessagesLoading,
   selectMessagesLoadingOlder,
@@ -70,7 +71,8 @@ export class ChatMessagesComponent {
 
   readonly isMobile = this.viewport.isMobile;
 
-  readonly allMessages = this.store.selectSignal(selectAllMessages);
+  readonly roomMessages = this.store.selectSignal(selectCurrentRoomMessages);
+  readonly channelMessages = this.store.selectSignal(selectActiveChannelMessages);
   private readonly activeChannelId = this.store.selectSignal(selectActiveChannelId);
   readonly currentRoom = this.store.selectSignal(selectCurrentRoom);
 
@@ -80,13 +82,6 @@ export class ChatMessagesComponent {
   readonly currentUser = this.store.selectSignal(selectCurrentUser);
   readonly isAdmin = this.store.selectSignal(selectIsCurrentUserAdmin);
 
-  readonly channelMessages = computed(() => {
-    const channelId = this.activeChannelId();
-    const roomId = this.currentRoom()?.id;
-
-    return this.allMessages().filter((message) => message.roomId === roomId && (message.channelId || 'general') === channelId);
-  });
-
   readonly conversationKey = computed(() => `${this.currentRoom()?.id ?? 'no-room'}:${this.activeChannelId() ?? 'general'}`);
   readonly conversationExhausted = toSignal(
     toObservable(this.conversationKey).pipe(

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts

@@ -43,9 +43,7 @@ import {
 } from '../../../../../attachment';
 import { PlatformService, ViewportService } from '../../../../../../core/platform';
 import { ElectronBridgeService } from '../../../../../../core/platform/electron/electron-bridge.service';
-import {
-  ExperimentalMediaSettingsService
-} from '../../../../../experimental-media';
+import { ExperimentalMediaSettingsService } from '../../../../../experimental-media';
 import { ExperimentalVlcPlayerComponent } from '../../../../../experimental-media/feature/experimental-vlc-player/experimental-vlc-player.component';
 import { KlipyService } from '../../../../application/services/klipy.service';
 import { hasDedicatedChatEmbed } from '../../../../domain/rules/link-embed.rules';
@@ -776,7 +774,6 @@ export class ChatMessageItemComponent implements OnDestroy {
     }
 
     const element = document.createElement(mime.startsWith('video/') ? 'video' : 'audio');
-
     const canPlay = element.canPlayType(mime) !== '';
 
     this.mediaSupportCache.set(mime, canPlay);

toju-app/src/app/domains/chat/feature/chat-messages/components/message-list/chat-message-list.component.html

@@ -12,7 +12,15 @@
     </div>
   }
 
-  @if (loading()) {
+  @if (refreshLoading()) {
+    <div class="pointer-events-none sticky top-0 z-10 flex justify-center py-1">
+      <div class="rounded-full border border-border bg-background/85 px-2.5 py-1 text-[11px] text-muted-foreground shadow-sm">
+        Loading...
+      </div>
+    </div>
+  }
+
+  @if (initialLoading()) {
     <div class="flex items-center justify-center py-8">
       <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
     </div>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-list/chat-message-list.component.ts

@@ -111,6 +111,9 @@ export class ChatMessageListComponent implements AfterViewChecked, OnDestroy {
     return all.slice(all.length - limit);
   });
 
+  readonly initialLoading = computed(() => this.loading() && this.messages().length === 0);
+  readonly refreshLoading = computed(() => this.loading() && this.messages().length > 0);
+
   readonly hasMoreMessages = computed(() => this.channelMessages().length > this.displayLimit());
 
   readonly dateSeparatorLabels = computed(() => {

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html

@@ -87,9 +87,9 @@
           <button
             type="button"
             (click)="selectGif(gif)"
-            [class]="isMobile()
+            [class]="(isMobile()
               ? 'group block w-full overflow-hidden rounded-xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'
-              : 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'"
+              : 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30') + ' [content-visibility:auto] [contain-intrinsic-size:auto_180px]'"
           >
             <div
               class="relative flex items-center justify-center overflow-hidden bg-secondary/30"