feat: #241 ⚙️ Perf | Non-Blocking Global Layout Suspense Isolation#344
Open
DammyAji wants to merge 4 commits into
Open
feat: #241 ⚙️ Perf | Non-Blocking Global Layout Suspense Isolation#344DammyAji wants to merge 4 commits into
DammyAji wants to merge 4 commits into
Conversation
…lation - Add StatsSkeleton fallback component for stats rows Suspense boundary - Add AdminStatsSkeleton fallback for admin telemetry rows - Wrap SystemStats + ModularStatsCard sections in Suspense in page.jsx - Export new skeletons from skeletons index Intensive admin/stats rows are now isolated in native React Suspense slots so the header and nav hydrate immediately without waiting for complex client telemetry summaries to resolve.
…lation - Add src/app/admin/page.tsx: wraps intensive AdminStatsRows in a Suspense boundary with AdminStatsSkeleton fallback so static header, nav, and tab bar are never blocked by telemetry resolution - Update layout.tsx: add SocketProvider to global layout tree so WebSocket context is available app-wide without re-mounting - Fix AdminTabBar.tsx: move export default outside function body and resolve undefined activeTab variable
- FloatingSidebar.tsx: remove duplicate handlePrefetch definition - nav.jsx: add missing usePathname import, remove duplicate onMouseEnter
Deriving ws/wss from NODE_ENV breaks in HTTPS dev environments (e.g. Codespaces). Use window.location.protocol instead so wss: is used whenever the page is served over HTTPS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #241
Resolves the issue where intensive client telemetry summaries were blocking initial server-side hydration pipelines for simple headers.
Changes
src/app/admin/page.tsx(new) — Admin dashboard page with static header,AdminTabBar, and intensiveAdminStatsRowsenclosed in a native React<Suspense>context slot withAdminStatsSkeletonas the static fallbacksrc/app/layout.tsx— AddedSocketProviderto the global layout so WebSocket context is available app-wide without blocking hydrationsrc/app/components/AdminTabBar.tsx— Fixed pre-existing bug (export inside function body, undefinedactiveTab)src/app/components/FloatingSidebar.tsx— Fixed duplicatehandlePrefetchdefinitionsrc/app/components/nav.jsx— Fixed missingusePathnameimport and duplicateonMouseEntersrc/app/hooks/useSocket.ts— Fixed WebSocket protocol detection to usewindow.location.protocolsowss://is used correctly on HTTPSTechnical Requirements Met
<Suspense>)AdminStatsSkeleton) served immediately so users interact with text blocks without waiting for full page arrays