fix: optimize hamburger menu performance on mobile by yamcodes · Pull Request #923 · yamcodes/arkenv

yamcodes · 2026-05-10T14:31:25Z

Fixes #911.

Optimized the hamburger menu in the Header component by:

Switching from conditional rendering to CSS visibility/opacity for the mobile dropdown. This avoids the React mount delay when clicking the menu button.
Adding a smooth transition for both opacity and a slight vertical translation.
Cleaning up unused imports in layout files.

Summary by CodeRabbit

Bug Fixes
- Improved mobile menu rendering with smoother animations and transitions when opening and closing.
Refactor
- Cleaned up unused imports across layout components.

changeset-bot · 2026-05-10T14:31:30Z

⚠️ No Changeset found

Latest commit: 6494ed3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

arkenv-bot · 2026-05-10T14:31:40Z

🤖 Hi @yamcodes, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

coderabbitai · 2026-05-10T14:31:40Z

Warning

Rate limit exceeded

@yamcodes has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 54 minutes and 51 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4a95d55b-bc73-430a-9090-6082e070db23

📥 Commits

Reviewing files that changed from the base of the PR and between 03a3437 and 6494ed3.

📒 Files selected for processing (1)

packages/fumadocs-ui/src/components/header.tsx

Walkthrough

Mobile menu overlay rendering is refactored to keep the DOM in place and use conditional Tailwind classes for state transitions, enabling smooth CSS animations. Layout imports are updated to use the refactored Header component and remove unused icon imports.

Changes

Mobile Menu Animation and Layout Updates

Layer / File(s)	Summary
Mobile Menu Overlay Animation `packages/fumadocs-ui/src/components/header.tsx`	Mobile dropdown overlay is changed from conditional render on `mobileOpen` to always-mounted when `hasMobileMenu` is true, with open/closed state controlled via conditional Tailwind classes (opacity, visibility, pointer-events, translate-y) to support transitions.
Layout Import Updates `apps/www/app/docs/layout.tsx`, `apps/www/app/(home)/layout.tsx`	Docs layout imports `Header` from `@arkenv/fumadocs-ui/components`; home layout removes unused `SiGithub` import.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

yamcodes/arkenv#621: This PR removes the unused SiGithub imports that were previously added in the retrieved PR to apps/www layout files.

Poem

🐰 A smooth menu slides in without stutter,
Classes dance as states flutter,
Imports dance—keep what we need,
Transitions bloom at mobile speed! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately summarizes the main change: optimizing hamburger menu performance on mobile by switching from conditional rendering to CSS visibility/opacity.
Linked Issues check	✅ Passed	The pull request addresses the performance issue from `#911` by implementing the stated optimization of switching from conditional rendering to CSS visibility/opacity for the mobile dropdown menu.
Out of Scope Changes check	✅ Passed	All changes are within scope: header component optimization for mobile performance and removal of unused imports from layout files related to the fix.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch 911-hamburger-menu-takes-a-second-to-load-on-mobile-1

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

arkenv-bot · 2026-05-10T14:32:23Z

🤖 I'm sorry @yamcodes, but I was unable to process your request. Please see the logs for more details.

pkg-pr-new · 2026-05-10T14:32:29Z

Open in StackBlitz

arkenv

npm i https://pkg.pr.new/arkenv@923

@arkenv/bun-plugin

npm i https://pkg.pr.new/@arkenv/bun-plugin@923

@arkenv/cli

npm i https://pkg.pr.new/@arkenv/cli@923

@arkenv/fumadocs-ui

npm i https://pkg.pr.new/@arkenv/fumadocs-ui@923

@arkenv/vite-plugin

npm i https://pkg.pr.new/@arkenv/vite-plugin@923

commit: 6494ed3

arkenv-bot · 2026-05-10T14:32:42Z

📦 Bundle Size Report

No results found

✅ All size limits passed!

coderabbitai

🧹 Nitpick comments (1)

packages/fumadocs-ui/src/components/header.tsx (1)

156-159: ⚡ Quick win

Scope the transition properties instead of using transition-all

On Line 156, transition-all is broader than needed for this menu and can add avoidable work on mobile. Limit animation to opacity and transform for a tighter, more predictable transition path.

Suggested diff

- "md:hidden fixed inset-0 z-40 bg-fd-background flex flex-col px-4 py-6 transition-all duration-200 ease-out",
+ "md:hidden fixed inset-0 z-40 bg-fd-background flex flex-col px-4 py-6 transition-[opacity,transform] duration-200 ease-out",

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/fumadocs-ui/src/components/header.tsx` around lines 156 - 159, The
menu's CSS uses a broad "transition-all" which causes unnecessary work on
mobile; in packages/fumadocs-ui/src/components/header.tsx, locate the mobile
menu class string (the one combined with the mobileOpen conditional) and replace
the "transition-all" class with transition classes limited to opacity and
transform so only opacity and translate changes are animated (keep the same
duration/easing and the mobileOpen conditional logic intact).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/fumadocs-ui/src/components/header.tsx`:
- Around line 156-159: The menu's CSS uses a broad "transition-all" which causes
unnecessary work on mobile; in packages/fumadocs-ui/src/components/header.tsx,
locate the mobile menu class string (the one combined with the mobileOpen
conditional) and replace the "transition-all" class with transition classes
limited to opacity and transform so only opacity and translate changes are
animated (keep the same duration/easing and the mobileOpen conditional logic
intact).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 61b4919a-f3e2-40dc-9e65-5f88b022027a

📥 Commits

Reviewing files that changed from the base of the PR and between 5e7ddcd and 03a3437.

📒 Files selected for processing (3)

apps/www/app/(home)/layout.tsx
apps/www/app/docs/layout.tsx
packages/fumadocs-ui/src/components/header.tsx

💤 Files with no reviewable changes (2)

apps/www/app/(home)/layout.tsx
apps/www/app/docs/layout.tsx

arkenv-bot · 2026-05-10T14:39:18Z

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

Project	Deployment	Review	Updated (Asia/Almaty)
arkenv	Ready	Preview, Comment	May 10 2026, 7:39 PM (Asia/Almaty)

fix: optimize hamburger menu performance on mobile

03a3437

yamcodes added bug Something isn't working www Improvements or additions to arkenv.js.org labels May 10, 2026

yamcodes linked an issue May 10, 2026 that may be closed by this pull request

Hamburger menu takes a second to load on mobile #911

Closed

github-actions Bot added the @arkenv/fumadocs-ui Issues or Pull Requests involving the ArkEnv Fumadocs UI theme label May 10, 2026

coderabbitai Bot reviewed May 10, 2026

View reviewed changes

coderabbitai Bot approved these changes May 10, 2026

View reviewed changes

perf: refine hamburger menu transition to limit animated properties

6494ed3

yamcodes merged commit fa6d5a7 into main May 10, 2026
18 checks passed

yamcodes deleted the 911-hamburger-menu-takes-a-second-to-load-on-mobile-1 branch May 10, 2026 14:46

coderabbitai Bot mentioned this pull request May 11, 2026

Fix to "hamburger menu takes a second to load on mobile" #935

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: optimize hamburger menu performance on mobile#923

fix: optimize hamburger menu performance on mobile#923
yamcodes merged 2 commits into
mainfrom
911-hamburger-menu-takes-a-second-to-load-on-mobile-1

yamcodes commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented May 10, 2026 •

edited

Loading

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Rate limit exceeded

❌ Failed checks (1 warning)

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

pkg-pr-new Bot commented May 10, 2026 •

edited

Loading

Uh oh!

arkenv-bot Bot commented May 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

yamcodes commented May 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

coderabbitai Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

pkg-pr-new Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arkenv-bot Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Bundle Size Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

arkenv-bot Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

yamcodes commented May 10, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 10, 2026 •

edited

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

pkg-pr-new Bot commented May 10, 2026 •

edited

Loading

arkenv-bot Bot commented May 10, 2026 •

edited

Loading