Fix layout shift flicker in runs table by using refresh hook instead of reload#808
Fix layout shift flicker in runs table by using refresh hook instead of reload#808karthikscale3 merged 4 commits intomainfrom
Conversation
…ding the entire page. This prevents the layout shift flicker that was happening previously. Signed-off-by: Karthik Kalyanaraman <[email protected]>
🦋 Changeset detectedLatest commit: 1278226 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests🌍 Community Worlds (21 failed)mongodb (1 failed):
redis (1 failed):
starter (18 failed):
turso (1 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
|
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Express | Nitro Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
Co-authored-by: Peter Wielander <[email protected]> Signed-off-by: Karthik Kalyan <[email protected]>
…ading the entire page. This prevents the layout shift flicker that was happening previously.
…nto karthik/cleanups
…of reload (#808) * Made a minor fix to use the hook to refresh the runs instead of reloading the entire page. This prevents the layout shift flicker that was happening previously. Signed-off-by: Karthik Kalyanaraman <[email protected]> * Update .changeset/pretty-teeth-brush.md Co-authored-by: Peter Wielander <[email protected]> Signed-off-by: Karthik Kalyan <[email protected]> * Hooks table - fix to use the hook to refresh the runs instead of reloading the entire page. This prevents the layout shift flicker that was happening previously. --------- Signed-off-by: Karthik Kalyanaraman <[email protected]> Signed-off-by: Karthik Kalyan <[email protected]> Co-authored-by: Peter Wielander <[email protected]>
Description
Replaces
reload()with a newrefresh()method in the runs table polling logic to prevent layout shift flicker. Therefresh()method refetches the current page data without resetting pagination state, preserving the existing UI while loading fresh data.Changes
refresh()method touseWorkflowRunsanduseWorkflowHookshooks that refetches current page without resetting staterefresh()instead ofreload()for periodic updatesTesting
Verified that runs table updates smoothly without layout shifts when polling for new data.