refactor: simplify skeleton loading and OrchestratorList rendering

[rickstaa]

Summary

• Inline ConnectButton skeleton directly in the dynamic() loading callback to prevent CLS during hydration (SSR-disabled component needs a placeholder while its JS chunk loads)
• Simplify OrchestratorList rendering in pages/index.tsx by removing showOrchList state, requestAnimationFrame deferral, Spinner wrapper, and external skeleton — data is always available from getStaticProps so these loading states were never shown in practice (same as TransactionsList which has no skeleton)

Extracted from #509 by @Roaring30s. Partially addresses #433.

Note: useWindowSize removal and useMediaQuery replacement will be handled in a follow-up PR — see #602.

Test plan

• Verify ConnectButton area shows skeleton on initial page load (throttle network in DevTools)
• Confirm no layout shift when ConnectButton hydrates
• Verify OrchestratorList renders correctly without the showOrchList deferral
• Run Lighthouse and check CLS score

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Mar 26, 2026 11:57am

[Copilot]

Pull request overview

This PR targets Lighthouse CLS improvements by adding skeleton fallbacks for client-only UI and reducing forced reflows in the main layout by removing useWindowSize usage.

Changes:

• Add skeleton loaders for ConnectButton (dynamic import fallback) and the home-page Orchestrator list.
• Replace the “Loading orchestrators…” placeholder with a skeleton component.
• Remove useWindowSize and the width-based useEffect that previously adjusted document.body overflow in layouts/main.tsx.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
pages/index.tsx	Uses OrchestratorListSkeleton instead of a text placeholder before the orchestrator list mounts.
layouts/main.tsx	Removes useWindowSize and adds a dynamic-import loading skeleton for ConnectButton.
components/OrchestratorList/Skeleton.tsx	New skeleton UI intended to match the OrchestratorList table layout while it’s deferred.
components/ConnectButton/Skeleton.tsx	New skeleton UI used as the loading fallback for the client-only ConnectButton.

Comments suppressed due to low confidence (1)

layouts/main.tsx:216

• Removing the width-based effect means document.body.style.overflow = "hidden" (set in onDrawerOpen) may remain stuck if the viewport crosses the mobile/desktop breakpoint while the drawer is open (e.g., resize/rotate), since there’s no longer any breakpoint listener to clear it. Consider using a lightweight matchMedia listener for the @bp3 breakpoint (or closing the drawer on breakpoint change) to ensure body overflow is always restored when leaving the mobile drawer layout.

  useEffect(() => {
    ReactGA.set({
      customBrowserType: !isMobile
        ? "desktop"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This skeleton doesn’t replicate the Table layout constraints (notably the overflowX: "auto" wrapper and minWidth: 960 table width in components/Table/index.tsx). On narrow viewports this can reintroduce CLS when the real OrchestratorList mounts and suddenly forces horizontal scrolling/min-width. Consider matching the Table wrapper structure/constraints so the skeleton and real table occupy the same space.

[Copilot]

The input-section spacing here doesn’t match the real Table input wrapper: components/Table/index.tsx applies marginTop: "$4" and marginLeft: "$5" but no wrapper marginBottom. The extra marginBottom: "$4" in the skeleton makes it taller than the real OrchestratorList header area, which can cause a vertical layout shift when swapping from skeleton to the actual table.

Suggested change

marginBottom: "$4",

[Copilot]

ConnectButtonSkeleton is imported mid-file (after non-import statements) and via a relative path. With simple-import-sort/imports enforced, this will fail lint and also deviates from the existing @components/* import convention in this file. Move the import into the main import block and use the @components/ConnectButton/Skeleton alias so imports can be sorted correctly.

[Copilot]

Import order here is no longer sorted (@components/OrchestratorList/Skeleton comes after @components/RoundStatus). With simple-import-sort/imports enforced in this repo, this will fail lint; re-run import sorting so the new skeleton import is placed in the correct order within the @components/* group.

Suggested change

	import RoundStatus from "@components/RoundStatus";
	import OrchestratorListSkeleton from "@components/OrchestratorList/Skeleton";
	import OrchestratorListSkeleton from "@components/OrchestratorList/Skeleton";
	import RoundStatus from "@components/RoundStatus";

[vercel]

Drawer open on mobile leaves body.overflow hidden after window resize to desktop, preventing page scrolling