[UX] Implement Shimmer Placeholders for Async AI Extraction #13

Open
opened 2026-05-07 16:45:38 +00:00 by mjasin · 0 comments
Owner

Issue 2: Intelligence Sidebar Shimmer Loading States

System Prompt:

Context: Users experience "stale" UI while KnowledgeService fetches data from Gemini.
Role: UX/Frontend Specialist.
Task: Replace static "Fetching..." text with animated Shimmer placeholders in the IntelligenceSidebar.
Requirements:

  1. Create a CSS-only keyframe animation for a linear-gradient shimmer effect.
  2. Apply shimmer to:
    • KnowledgeGraph (circle/pill shapes).
    • KnowledgeCheck (rectangular blocks for question and options).
  3. Ensure the shimmer matches the dark theme palette: background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%).
    DOD: The transition from Shimmer to real content must be a smooth 300ms fade-in.
#### **Issue 2: Intelligence Sidebar Shimmer Loading States** **System Prompt:** > **Context:** Users experience "stale" UI while `KnowledgeService` fetches data from Gemini. > **Role:** UX/Frontend Specialist. > **Task:** Replace static "Fetching..." text with animated Shimmer placeholders in the `IntelligenceSidebar`. > **Requirements:** > > 1. Create a CSS-only keyframe animation for a linear-gradient shimmer effect. > 2. Apply shimmer to: > - `KnowledgeGraph` (circle/pill shapes). > - `KnowledgeCheck` (rectangular blocks for question and options). > 3. Ensure the shimmer matches the dark theme palette: `background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%)`. > **DOD:** The transition from Shimmer to real content must be a smooth 300ms fade-in.
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mjasin/Nexus.Reader#13