🐛 GRIMOIRE TAB: Permanently stuck on "Loading grimoire..." — loaded state never set to true #172

New Issue

2026-05-27T17:28:15+02:00

Anexim commented

2026-05-27 17:28:15 +02:00

Bug

The Grimoire tab doesn't load. It permanently shows "Loading grimoire..." and never displays the spell content.

Root Cause

In src/app/components/GrimoireTab.tsx:12-13:

const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]);
const [loaded, _setLoaded] = useState(false);

The loaded state variable is initialized to false, and _setLoaded is never called (the underscore prefix signals "intentionally unused").

At line 22:

if (!loaded) {
  return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
}

Since loaded is always false, the component permanently renders the loading message. The spell data pipeline works correctly (spells with grimoire: true exist, the filter logic is correct, the useEffect populates grimoireSpells), but it's unreachable behind the dead guard.

Fix (One Line)

In src/app/components/GrimoireTab.tsx:

Option A: Remove the loaded state variable and the if (!loaded) guard entirely (cleanest — the existing grimoireSpells.length === 0 check already handles the empty state)
Option B: Call _setLoaded(true) at the end of the useEffect that populates grimoireSpells

File

src/app/components/GrimoireTab.tsx:12-24 (the bug)

## Bug The Grimoire tab doesn't load. It permanently shows "Loading grimoire..." and never displays the spell content. ## Root Cause In `src/app/components/GrimoireTab.tsx:12-13`: ```typescript const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]); const [loaded, _setLoaded] = useState(false); ``` The `loaded` state variable is initialized to `false`, and `_setLoaded` is **never called** (the underscore prefix signals "intentionally unused"). At line 22: ```typescript if (!loaded) { return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>; } ``` Since `loaded` is always `false`, the component permanently renders the loading message. The spell data pipeline works correctly (spells with `grimoire: true` exist, the filter logic is correct, the `useEffect` populates `grimoireSpells`), but it's unreachable behind the dead guard. ## Fix (One Line) In `src/app/components/GrimoireTab.tsx`: - **Option A:** Remove the `loaded` state variable and the `if (!loaded)` guard entirely (cleanest — the existing `grimoireSpells.length === 0` check already handles the empty state) - **Option B:** Call `_setLoaded(true)` at the end of the `useEffect` that populates `grimoireSpells` ## File - `src/app/components/GrimoireTab.tsx:12-24` (the bug)

Anexim added the ai:todo label 2026-05-27 17:28:15 +02:00

n8n-gitea was assigned by Anexim

2026-05-27 17:28:15 +02:00

Anexim referenced this issue

2026-05-27 17:44:07 +02:00

📋 PRIORITIZATION: Bug fix order for all 9 open issues (#164–#172) #173

n8n-gitea referenced this issue from a commit

2026-05-28 09:48:35 +02:00

fix(#165,#166,#167,#168,#169,#171,#172): resolve 7 open bug issues

Anexim closed this issue

2026-05-28 09:49:34 +02:00

Anexim commented