fix: GitHub stars shows [object Response] when toggling list/grid view

[AbhiVarde]

Problem

Toggling between list and grid view causes the GitHub star count in the header to display [object Response] instead of the actual number.

Root Cause

Header was rendered inside shellComponent which doesn't re-render on client-side navigation. When the view toggle triggers a route transition, useLoaderData() returns the raw unresolved object instead of the number.

Fix

Split RootDocument into:

• RootShell (shellComponent): static HTML shell only, no loader data
• RootLayout (component): Header, Outlet, Footer where useLoaderData() works correctly

No styles, logic, or other behavior changed.

Summary by CodeRabbit

• Refactor

  • Restructured layout and routing architecture for improved code organization.

• Style

  • Updated text wrapping behavior for improved content display.

[appwrite]

Appwrite Arena

Project ID: appwrite-arena

Sites (1)

Site	Status	Logs	Preview	QR
Arena arena	Ready	View Logs	Preview URL

Tip

HTTPS and SSL certificates are handled automatically for all your Sites

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 26844f69-71ae-48d5-87a8-ada596a95d44

📥 Commits

Reviewing files that changed from the base of the PR and between b423d9a and 41374a1.

📒 Files selected for processing (1)

• src/routes/__root.tsx

---

Walkthrough

The root route component in src/routes/__root.tsx is refactored to restructure the layout component hierarchy. The change separates shell HTML rendering from layout rendering: RootDocument is renamed to RootShell and now renders only the HTML scaffold; a new RootLayout component is introduced to handle header, outlet, and footer rendering. The Route configuration is updated to use RootShell as shellComponent and adds RootLayout as the component. Outlet is imported and used within RootLayout to render routed content. A className adjustment changes overflow-wrap:anywhere to wrap-anywhere in the Body element.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the bug being fixed (GitHub stars displaying as [object Response]) and the condition that triggers it (toggling list/grid view), making it directly related to the main change in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

Tip

CodeRabbit can use OpenGrep to find security vulnerabilities and bugs across 17+ programming languages.

OpenGrep is compatible with Semgrep configurations. Add an opengrep.yml or semgrep.yml configuration file to your project to enable OpenGrep analysis.

[Meldiron]

Love the effort! But it seems we still have same problem on preview 🤔 Feel free to PM me if you have som ideas/questions.

[AbhiVarde]

thanks! it works perfectly on my side locally. if it still doesn't work on preview, maybe we can try:

<Header stars={typeof stars === "number" ? stars : 0} />

[Copilot]

Pull request overview

Refactors the TanStack Router root route to ensure the GitHub stars value in the Header updates correctly on client-side navigation (e.g., when toggling list/grid view), avoiding [object Response] being displayed.

Changes:

• Split the root document into a static RootShell (used as shellComponent) and a dynamic RootLayout (used as component) that reads loader data and renders Header/Outlet/Footer.
• Moved Header (and Footer) rendering into the route component so Route.useLoaderData() updates on navigation.
• Replaced the body text-wrapping class from an arbitrary CSS utility to wrap-anywhere.

---

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

[AbhiVarde]

[overflow-wrap:anywhere] and wrap-anywhere are equivalent canonical classes, no style change.