Show reload button when IndexedDB deletion is blocked

[fulopkovacs]

Summary by CodeRabbit

• Bug Fixes
  • Improved error handling when database operations are blocked due to concurrent activity in other browser tabs
  • Added "Reload page" button to help users quickly resolve database conflicts
  • Enhanced error messages with clearer guidance on recovery actions

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change adds a reload button UI to handle blocked IndexedDB deletion operations across tabs. When deletion is blocked, a new state tracks this condition and displays an error message with a button that triggers a page refresh.

Changes

Cohort / File(s)	Summary
Error handling and UI recovery src/routes/__root.tsx	Added showReloadButton state to track blocked deletion operations. On IndexedDB deleteDatabase blocked event, state is set to true and error message is augmented with refresh suggestion. Conditional rendering displays a "Reload page" button that invokes window.location.reload().

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Show reload button when IndexedDB deletion is blocked' directly and accurately describes the main change: adding UI to display a reload button when database deletion is blocked.

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[github-actions]

🚀 Preview Deployment

Status: ✅ Ready!

Preview URL: Open Preview

Commit: 20374324f41eca826b00806bba22fa76094c7604

Built and deployed successfully

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/routes/__root.tsx (1)

116-126: Consider adding visual enhancements for consistency.

The reload button implementation correctly provides users with a manual refresh option when database deletion is blocked. The logic is sound and consistent with existing patterns in the codebase.

💡 Optional enhancements for better UX

Consider these improvements for visual consistency and better user experience:

1. Add an icon to match the main reset button's style:

       <Button
         className="mx-auto"
         variant="outline"
         onClick={() => {
           window.location.reload();
         }}
       >
-        Reload page
+        <RotateCwIcon /> Reload page
       </Button>

2. Prevent double-clicks by disabling the button after the first click:

+      const [isReloading, setIsReloading] = useState(false);
       {showReloadButton && (
         <Button
           className="mx-auto"
           variant="outline"
+          disabled={isReloading}
           onClick={() => {
+            setIsReloading(true);
             window.location.reload();
           }}
         >
-          Reload page
+          <RotateCwIcon /> {isReloading ? "Reloading..." : "Reload page"}
         </Button>
       )}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d9d8cbe and 2037432.

📒 Files selected for processing (1)

• src/routes/__root.tsx

🧰 Additional context used

📓 Path-based instructions (3)

src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Always ensure no formatting/linting issues exist in code - use pnpm check --fix to automatically fix issues

Files:

• src/routes/__root.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer functions over arrow functions for React components

Files:

• src/routes/__root.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer type over interface for type definitions

Files:

• src/routes/__root.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-24T15:25:07.106Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.

Applied to files:

• src/routes/__root.tsx

📚 Learning: 2025-12-28T23:34:13.416Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.

Applied to files:

• src/routes/__root.tsx

🧬 Code graph analysis (1)

src/routes/__root.tsx (4)

src/components/ui/button.tsx (1)

• Button (63-63)

src/components/EditableProjectDetails.tsx (1)

• window (83-85)

src/components/ConfigureDB.tsx (1)

• ConfigureDB (23-71)

src/components/ResetTheDbDialog.tsx (1)

• ResetTheDbDialog (17-69)

🔇 Additional comments (2)

src/routes/__root.tsx (2)

74-74: LGTM!

The state declaration correctly tracks whether the reload button should be displayed. The boolean initialization to false is appropriate.

---

91-93: Code logic and formatting are correct.

The onblocked handler properly enables the reload button and provides a clear, helpful error message guiding users to close other tabs or refresh the page. Ensure pnpm check --fix runs without errors locally before merging.