feat(lazy loading): Implement virtual list with virtua (#241)
### Summary of Improvements This PR replaces the custom `IntersectionObserver`-based virtualization with the `virtua` library to significantly improve rendering performance and UI responsiveness. ### 🚀 Performance Results Verified using `session-performance.test.ts`: - **Rendering**: 2000 messages rendered in **16.90ms**. - **Huge Conversation**: 10,000 messages processed in **0.80ms**. - **Session Switching**: Average switch time reduced to **0.58ms** (virtually zero lag). ### 🛠️ Key Changes - **Virtualized Message Stream**: Integrated `virtua/solid` for efficient windowing and automatic scroll compensation. - **Floating Scroll Controls**: Applied `position: absolute` and `pointer-events: none` to the list controls to ensure scroll-to-top/bottom buttons float correctly over the message area without blocking interactions. - **Package Synchronization**: Updated `virtua` and SDK dependencies, with a fully synchronized `package-lock.json` for stable builds. ### 🎥 UI Verification https://github.com/user-attachments/assets/24e483a3-8be6-4ac4-a431-d719f2015f4e - **Smooth Scrolling**: Verified that rendering gaps are eliminated during fast scrolls. - **Position Retention**: Scroll positions are preserved when switching between sessions. > [!NOTE] > Detailed performance gains and layout fixes are isolated to the `virtua` implementation and core package updates, following the requested cleanup. --------- Co-authored-by: Shantur Rathore <i@shantur.com>
This commit is contained in:
committed by
GitHub
parent
68407a01a4
commit
313e82880b
@@ -77,23 +77,23 @@ export default defineConfig({
|
||||
theme_color: "#1a1a1a",
|
||||
},
|
||||
workbox: {
|
||||
// Workbox defaults to 2 MiB; our main bundle can slightly exceed that.
|
||||
// This is a build-time limit for the precache manifest, not a hard runtime cap.
|
||||
maximumFileSizeToCacheInBytes: 3 * 1024 * 1024,
|
||||
// Preserve server-side auth redirects (e.g., /login) instead of serving cached index.html.
|
||||
navigateFallback: null,
|
||||
// Only precache static assets (avoid caching HTML documents / routes).
|
||||
globPatterns: ["**/*.{js,css,png,jpg,jpeg,svg,webp,ico,woff,woff2,ttf,eot,json,webmanifest}"],
|
||||
// Monaco assets can be large; cache them at runtime instead.
|
||||
globIgnores: [
|
||||
"**/*.html",
|
||||
"**/assets/*worker-*.js",
|
||||
"**/assets/editor.api-*.js",
|
||||
"**/monaco/vs/**/*",
|
||||
],
|
||||
// Only cache static UI assets; never cache API traffic.
|
||||
runtimeCaching: [
|
||||
{
|
||||
// Workbox defaults to 2 MiB; our main bundle can slightly exceed that.
|
||||
// This is a build-time limit for the precache manifest, not a hard runtime cap.
|
||||
maximumFileSizeToCacheInBytes: 3 * 1024 * 1024,
|
||||
// Preserve server-side auth redirects (e.g., /login) instead of serving cached index.html.
|
||||
navigateFallback: null,
|
||||
// Only precache static assets (avoid caching HTML documents / routes).
|
||||
globPatterns: ["**/*.{js,css,png,jpg,jpeg,svg,webp,ico,woff,woff2,ttf,eot,json,webmanifest}"],
|
||||
// Monaco assets can be large; cache them at runtime instead.
|
||||
globIgnores: [
|
||||
"**/*.html",
|
||||
"**/assets/*worker-*.js",
|
||||
"**/assets/editor.api-*.js",
|
||||
"**/monaco/vs/**/*",
|
||||
],
|
||||
// Only cache static UI assets; never cache API traffic.
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({ url, request }) => {
|
||||
if (url.pathname.startsWith("/api/")) return false
|
||||
if (request.destination === "document") return false
|
||||
|
||||
Reference in New Issue
Block a user