From b98d4171858fcdbbd5ad00a7b759838f6622b165 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Mon, 24 Aug 2026 22:33:02 +0530 Subject: [PATCH] fix(ui): eliminate mega menu flash and lag --- bun.lock | 2 +- docs/ui-visual-contract-0.8.json | 2 +- packages/ui/components/MegaMenu.wrn | 25 +++++++++++++++++++++---- packages/ui/package.json | 2 +- packages/ui/test/ui.test.ts | 3 ++- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/bun.lock b/bun.lock index cf3a21b2..ecb7892c 100644 --- a/bun.lock +++ b/bun.lock @@ -688,7 +688,7 @@ }, "packages/ui": { "name": "@wrnexus/ui", - "version": "0.8.33", + "version": "0.8.34", "dependencies": { "@wrnexus/core": "workspace:*", }, diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index 6ffcafee..01c149fe 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -55,7 +55,7 @@ "packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890", "packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad", "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b", - "packages/ui/components/MegaMenu.wrn": "ea15f4aa31a3c52943cdd9f726f49386937d177de5ddec1d69e57644c0495c8f", + "packages/ui/components/MegaMenu.wrn": "76b80afc78294c82b1aadc19cc4904de0233e0012c48cf5bce17ca638d8effa2", "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5", "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5", "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2", diff --git a/packages/ui/components/MegaMenu.wrn b/packages/ui/components/MegaMenu.wrn index 19f6e590..fb325c8c 100644 --- a/packages/ui/components/MegaMenu.wrn +++ b/packages/ui/components/MegaMenu.wrn @@ -204,7 +204,7 @@ component MegaMenu { aria-haspopup="true" aria-expanded='{visible}' @click='activatePanel(event)' - @mousemove='hoverPanel(event)' + @mouseenter='hoverPanel(event)' > {label} @@ -382,6 +382,10 @@ component MegaMenu { box-shadow: var(--wrn-shadow-1); } + /* Keep SSR output closed before the reactive runtime hydrates it. */ + .wrn-mega__panel[data-show="false"] { display: none; } + .wrn-mega__panel[data-show="true"] { display: flex; } + .wrn-mega[data-panel-width="lg"] .wrn-mega__panel { width: min(48rem, calc(100vw - 2rem)); } .wrn-mega[data-panel-width="xl"] .wrn-mega__panel { width: min(72rem, calc(100vw - 2rem)); } .wrn-mega[data-panel-width="2xl"] .wrn-mega__panel { width: min(88rem, calc(100vw - 2rem)); } @@ -462,9 +466,16 @@ component MegaMenu { .wrn-mega[data-density="compact"] :is(.wrn-mega__panel, .wrn-mega__rail) { padding: 0.7rem; } .wrn-mega[data-density="compact"] .wrn-mega__columns { gap: 0.65rem; } .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; } - .wrn-mega[data-variant="catalog"] .wrn-mega__link { padding-block: 0.28rem; } - .wrn-mega[data-variant="catalog"] .wrn-mega__heading { color: var(--wrn-color-text); font-size: 0.78rem; letter-spacing: 0; text-transform: none; } - .wrn-mega[data-variant="catalog"] .wrn-mega__columns { grid-template-columns: minmax(0, 1fr); } + .wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); } + .wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; } + .wrn-mega[data-variant="catalog"] .wrn-mega__rail { border-radius: calc(var(--wrn-radius-lg) - 0.25rem); } + .wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); } + .wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; } + .wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0 0 1rem; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; } + .wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; } + .wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; border: 1px solid transparent; } + .wrn-mega[data-variant="catalog"] .wrn-mega__link:hover { border-color: var(--wrn-color-border); } + .wrn-mega[data-variant="catalog"] .wrn-mega__column-action { margin-top: auto; padding-top: 1rem; } .wrn-mega[data-variant="dark"] .wrn-mega__panel { color: #f8fafc; border-color: #2b2b2b; background: #151515; } .wrn-mega[data-variant="dark"] :is(.wrn-mega__heading, .wrn-mega__link, .wrn-mega__featured strong) { color: #f8fafc; } .wrn-mega[data-variant="dark"] :is(.wrn-mega__link-description, .wrn-mega__column-description, .wrn-mega__eyebrow, .wrn-mega__featured p) { color: #a3a3a3; } @@ -532,6 +543,8 @@ component MegaMenu { box-shadow: none; } + .wrn-mega__panel[data-show="false"] { display: none; } + .wrn-mega__columns { grid-template-columns: 1fr; } @@ -539,6 +552,10 @@ component MegaMenu { .wrn-mega__rail, .wrn-mega__columns { overflow: visible; } .wrn-mega__featured { width: auto; padding: 1rem 0 0; border-top: 1px solid var(--wrn-color-border); border-left: 0; } .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: 1fr; } + .wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: auto; } + .wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: 1fr; } + .wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 1rem 0 0; } + .wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: 1fr; } } } } diff --git a/packages/ui/package.json b/packages/ui/package.json index 3e8195c2..84c1eeee 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.8.33", + "version": "0.8.34", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index f970f12a..27c68b9f 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -3152,8 +3152,9 @@ test("mega menu keeps hover activation and click activation from cancelling each const source = readFileSync(uiComponentPath("MegaMenu"), "utf8"); expect(source).toContain("openOnHover: boolean = true"); expect(source).toContain("@click='activatePanel(event)'"); - expect(source).toContain("@mousemove='hoverPanel(event)'"); + expect(source).toContain("@mouseenter='hoverPanel(event)'"); expect(source).toContain("}, 140)"); + expect(source).toContain('.wrn-mega__panel[data-show="false"] { display: none; }'); expect(source).not.toContain("@focus='showPanel(event)'"); expect(source).toContain("max-height: calc(100dvh - 5.5rem)"); });