ui: comments etc

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -298,7 +298,6 @@ function MobileNetworkPanelCont({ panelHeight }: { panelHeight: number }) {
   );
 }
 
-// Custom hook for infinite scrolling
 const useInfiniteScroll = (loadMoreCallback: () => void, hasMore: boolean) => {
   const observerRef = useRef<IntersectionObserver>(null);
   const loadingRef = useRef<HTMLDivElement>(null);
@@ -401,7 +400,6 @@ export const NetworkPanelComp = observer(
       transferredSize: 0,
     });
 
-    // Store original data in refs to avoid reprocessing
     const originalListRef = useRef([]);
     const socketListRef = useRef([]);
 
@@ -799,7 +797,7 @@ export const NetworkPanelComp = observer(
             <div className="flex items-center justify-center h-full">
               <div className="text-center">
                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
-                <p>Loading network data...</p>
+                <p>Processing initial network data...</p>
               </div>
             </div>
           ) : (

frontend/app/components/shared/DevTools/NetworkPanel/utils.ts

@@ -13,11 +13,7 @@ export function mergeListsWithZoom<
     return [];
   }
 
-  // Create result array with pre-allocated size estimation
+  // Optimized for common case - no zoom
-  // (We'll set an initial capacity based on rough estimate)
-  const merged = [];
-
-  // Optimize for common case - no zoom
   if (!zoom?.enabled) {
     return mergeThreeSortedArrays(arr1, arr2, arr3);
   }
@@ -40,7 +36,6 @@ export function mergeListsWithZoom<
   );
 }
 
-// Helper function to perform binary search to find index of first element >= threshold
 function binarySearchStartIndex<T extends Record<string, any>>(
   arr: T[],
   threshold: number,
@@ -67,13 +62,13 @@ function binarySearchStartIndex<T extends Record<string, any>>(
   return low;
 }
 
-// Specialized function for when no zoom is applied
 function mergeThreeSortedArrays<
   T extends Record<string, any>,
   Y extends Record<string, any>,
   Z extends Record<string, any>,
 >(arr1: T[], arr2: Y[], arr3: Z[]): Array<T | Y | Z> {
   const totalLength = arr1.length + arr2.length + arr3.length;
+  // prealloc array size
   const result = new Array(totalLength);
 
   let i = 0,
@@ -98,7 +93,7 @@ function mergeThreeSortedArrays<
   return result;
 }
 
-// Specialized function for merging with zoom range
+// same as above, just with zoom stuff
 function mergeThreeSortedArraysWithinRange<
   T extends Record<string, any>,
   Y extends Record<string, any>,
@@ -113,6 +108,7 @@ function mergeThreeSortedArraysWithinRange<
   start: number,
   end: number,
 ): Array<T | Y | Z> {
+  // we don't know beforehand how many items will be there
   const result = [];
 
   let i = startIdx1;