4.11: Create Loading Skeletons

[justin808]

Overview

Create skeleton loading states for Suspense boundaries.

Parent Epic: #70
Priority: P1

Prerequisites

• 1.2: Configure CSS Modules #72 (1.2: Configure CSS Modules)

Next Issues (after this is complete)

• 6.1: Implement Streaming for Story List
• 6.2: Implement Streaming for Comments

Acceptance Criteria

• app/javascript/components/Skeletons.tsx created
• StoryListSkeleton - placeholder for story list
• StorySkeleton - single story placeholder
• CommentSkeleton - comment placeholder
• CommentTreeSkeleton - nested comments placeholder
• CSS module styling with pulse/shimmer animation (Skeletons.module.css)

Implementation Notes

Skeletons should match the approximate dimensions of real content:

• Story skeleton: title bar, meta line
• Comment skeleton: author line, 2-3 content lines
• Use CSS animation for loading effect

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and agent prompts for this issue.

• Create Plan

Examples

• Example 1
• Example 2

🔗 Similar & Duplicate Issues

Related Issues

• shakacode/react_on_rails-demos#86
• shakacode/react_on_rails-demos#82
• shakacode/react_on_rails-demos#88
• shakacode/react_on_rails-demos#89
• shakacode/react_on_rails-demos#87

👤 Suggested Assignees

• justin808

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false