wip: optimizations

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversations-panel.component.html

@@ -22,19 +22,29 @@
 
     <div
       appThemeNode="dmConversationList"
-      class="min-h-0 flex-1 overflow-y-auto p-2"
+      class="flex min-h-0 flex-1 flex-col"
     >
       @if (directMessages.conversations().length === 0) {
         <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">No direct messages yet.</div>
       } @else {
-        <div class="space-y-1">
-          @for (conversation of directMessages.conversations(); track trackConversationId($index, conversation)) {
+        <app-virtual-list
+          class="block h-full p-2"
+          [items]="directMessages.conversations()"
+          [estimateSize]="64"
+          [overscan]="6"
+          [trackBy]="trackConversationId"
+        >
+          <ng-template
+            #item
+            let-conversation
+          >
             <app-dm-conversation-item
+              class="block pb-1"
               [conversation]="conversation"
               (conversationOpened)="conversationSelected.emit($event)"
             />
-          }
-        </div>
+          </ng-template>
+        </app-virtual-list>
       }
     </div>