feat(dashboard): Phase 2.5b/c — Loading Skeletons & Search Empty State

[DevanshuNEU]

🎨 Dashboard V2 Polish — Loading Skeletons & Search UX

Loading Skeletons

Updated Skeleton.tsx

• Fixed hardcoded dark colors → semantic theme tokens (light mode support)
• Added new skeleton components:
  • SearchResultSkeleton / SearchResultsSkeleton
  • DependencyGraphSkeleton (with fake graph visualization)
  • StyleInsightsSkeleton (metric cards + patterns)

Component Updates

Component	Before	After
DependencyGraph	Spinner + text	Full skeleton with graph preview
StyleInsights	Spinner + text	Full skeleton with metrics
SearchPanel	None	Results skeleton while loading

Smart Search Empty State

New SearchEmptyState component with:

1. Query-Specific Suggestions — Analyzes the failed query and suggests refinements

   • "auth" → "login handler", "authentication middleware"
   • "api" → "REST endpoint", "API handler"
   • Generic → "{query} implementation", "{query} helper"

2. Popular Example Queries — Common searches to help users get started

   • authentication, error handling, api routes, database

3. Search Tips — Best practices for semantic code search

   • Use natural language
   • Search by concept
   • Be specific

4. Click to Search — Clicking any suggestion auto-fills and triggers search

Testing

• ✅ Build passes
• ✅ Light mode verified
• ✅ Dark mode verified

Commits

• 84eccfe - feat(skeleton): add loading skeletons for all tabs
• 8c44166 - feat(search): smart empty state with suggestions

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced search with intelligent suggestions and popular example queries displayed when no results are found.

• User Experience

  • Replaced generic loading spinners with contextual skeleton loaders for improved visual feedback across search, graphs, and insights components.

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

[vercel]

@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce skeleton loading states across multiple components and add a new search empty state component with suggestions. The SearchPanel's search logic is refactored to better handle loading states, timing, and empty results with improved user guidance.

Changes

Cohort / File(s)	Summary
Loading state components frontend/src/components/DependencyGraph.tsx, frontend/src/components/StyleInsights.tsx	Replaced inline spinner and text loading UI with dedicated skeleton components (DependencyGraphSkeleton and StyleInsightsSkeleton).
Search panel refactoring frontend/src/components/SearchPanel.tsx	Refactored search invocation with new searchWithQuery() and handleSuggestionClick() functions. Added SearchResultsSkeleton for loading state and replaced hardcoded empty state markup with SearchEmptyState component accepting query and callback props.
New search empty state component frontend/src/components/search/SearchEmptyState.tsx	New component rendering empty-state UI with dynamic suggestions based on query keywords, predefined popular search examples, and search tips. Exports SearchEmptyStateProps interface and SearchEmptyState component.
Skeleton component updates frontend/src/components/ui/Skeleton.tsx	Updated base Skeleton styling (bg-white/5 → bg-muted), replaced hardcoded colors with semantic tokens (bg-card, border-border), redesigned SearchResultSkeleton layout, and introduced SearchResultsSkeleton, DependencyGraphSkeleton, and StyleInsightsSkeleton as new exported functions with composed layouts.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A skeleton dance of loading states,
New empty screens with helpful gates,
Search suggestions bloom like clover bright,
The UI grows with graceful might! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 8.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the two main features: loading skeletons (Phase 2.5b) and search empty state (Phase 2.5c), matching the primary changes throughout the changeset.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
opencodeintel	Ready	Preview, Comment	Jan 25, 2026 3:07pm