byarielm.fyi
+2
-2
dist/index.html
+2
-2
dist/index.html
···
26
26
content="black-translucent"
27
27
/>
28
28
<title>ATLast: Find Your People in the ATmosphere</title>
29
-
<script type="module" crossorigin src="/assets/index-Cqs3lHBa.js"></script>
30
-
<link rel="stylesheet" crossorigin href="/assets/index-Cd9fK3UQ.css">
29
+
<script type="module" crossorigin src="/assets/index-o15l4btH.js"></script>
30
+
<link rel="stylesheet" crossorigin href="/assets/index-Bj_zheer.css">
31
31
</head>
32
32
<body>
33
33
<div id="root"></div>
+10
-30
src/components/VirtualizedResultsList.tsx
+10
-30
src/components/VirtualizedResultsList.tsx
···
26
26
const virtualizer = useVirtualizer({
27
27
count: results.length,
28
28
getScrollElement: () => parentRef.current,
29
-
estimateSize: (index) => {
30
-
const result = results[index];
31
-
const isExpanded = expandedResults.has(index);
32
-
const matchCount = result.atprotoMatches.length;
33
-
34
-
// Base height for source user header + padding
35
-
let estimatedHeight = 80;
36
-
37
-
if (matchCount === 0) {
38
-
// No matches - just the "not found" message
39
-
estimatedHeight += 100;
40
-
} else {
41
-
// Calculate height based on number of visible matches
42
-
const visibleMatches = isExpanded ? matchCount : 1;
43
-
44
-
// Each match item: ~120px base + potential description (~40px)
45
-
// Assume ~30% of matches have descriptions
46
-
const avgMatchHeight = 140;
47
-
estimatedHeight += visibleMatches * avgMatchHeight;
48
-
49
-
// Add space for "show more" button if there are hidden matches
50
-
if (matchCount > 1) {
51
-
estimatedHeight += 40;
52
-
}
53
-
}
54
-
55
-
return estimatedHeight;
56
-
},
57
-
overscan: 3, // Render 3 extra items above/below viewport (reduced from 5 for better performance)
29
+
estimateSize: () => 200, // Initial estimate, will be measured dynamically
30
+
overscan: 3,
31
+
// Enable dynamic measurement - virtualizer will measure actual rendered heights
32
+
// and adjust positioning automatically
33
+
measureElement:
34
+
typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1
35
+
? (element) => element.getBoundingClientRect().height
36
+
: undefined,
58
37
});
59
38
60
39
return (
···
72
51
return (
73
52
<div
74
53
key={virtualItem.key}
54
+
data-index={virtualItem.index}
55
+
ref={virtualizer.measureElement}
75
56
style={{
76
57
position: "absolute",
77
58
top: 0,
78
59
left: 0,
79
60
width: "100%",
80
-
height: `${virtualItem.size}px`,
81
61
transform: `translateY(${virtualItem.start}px)`,
82
62
}}
83
63
>