feat(frontend): Loading skeletons + animations polish (#36)

- Add Skeleton components (RepoCardSkeleton, StatCardSkeleton, etc.)
- Add loading state to RepoList with skeleton grid
- Add reposLoading state in DashboardHome
- Add CSS animations (fadeIn, slideIn, scaleIn)
- Add staggered animations for repo cards
- Add focus-ring and hover utilities
- Smooth page transitions

Author: DevanshuNEU

frontend/src/components/RepoList.tsx

@@ -1,9 +1,11 @@
 import type { Repository } from '../types'
+import { RepoGridSkeleton } from './ui/Skeleton'
 
 interface RepoListProps {
   repos: Repository[]
   selectedRepo: string | null
   onSelect: (repoId: string) => void
+  loading?: boolean
 }
 
 // Status indicator with glow effect
@@ -40,7 +42,11 @@ const StatusIndicator = ({ status }: { status: string }) => {
   )
 }
 
-export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
+export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListProps) {
+  if (loading) {
+    return <RepoGridSkeleton count={3} />
+  }
+
   if (repos.length === 0) {
     return (
       <div className="bg-[#111113] border border-white/5 rounded-2xl p-16 text-center">
@@ -57,19 +63,20 @@ export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {repos.map((repo) => {
+      {repos.map((repo, index) => {
         const isSelected = selectedRepo === repo.id
 
         return (
           <button
             key={repo.id}
             onClick={() => onSelect(repo.id)}
             className={`group relative text-left rounded-2xl p-5 transition-all duration-300 
-              bg-[#111113] border overflow-hidden
+              bg-[#111113] border overflow-hidden opacity-0 animate-fade-in focus-ring
               ${isSelected 
                 ? 'border-blue-500/50 shadow-lg shadow-blue-500/10' 
                 : 'border-white/5 hover:border-white/10 hover:bg-[#151518]'
               }`}
+            style={{ animationDelay: `${index * 0.05}s` }}
           >
             {/* Subtle gradient overlay on hover */}
             <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

frontend/src/components/dashboard/DashboardHome.tsx

@@ -20,6 +20,7 @@ export function DashboardHome() {
   const [selectedRepo, setSelectedRepo] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<RepoTab>('overview')
   const [loading, setLoading] = useState(false)
+  const [reposLoading, setReposLoading] = useState(true)
   const [showPerformance, setShowPerformance] = useState(false)
 
   const fetchRepos = async () => {
@@ -33,6 +34,8 @@ export function DashboardHome() {
       setRepos(data.repositories || [])
     } catch (error) {
       console.error('Error fetching repos:', error)
+    } finally {
+      setReposLoading(false)
     }
   }
 
@@ -150,6 +153,7 @@ export function DashboardHome() {
           <RepoList 
             repos={repos} 
             selectedRepo={selectedRepo}
+            loading={reposLoading}
             onSelect={(id) => {
               setSelectedRepo(id)
               setActiveTab('overview')

frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,86 @@
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  className?: string
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-lg bg-white/5',
+        className
+      )}
+    />
+  )
+}
+
+// Preset skeleton components
+export function RepoCardSkeleton() {
+  return (
+    <div className="bg-[#111113] border border-white/5 rounded-2xl p-5 space-y-4">
+      <div className="flex items-center gap-3">
+        <Skeleton className="w-10 h-10 rounded-xl" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between">
+          <Skeleton className="h-3 w-28" />
+          <Skeleton className="h-3 w-12" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function RepoGridSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <RepoCardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5 space-y-2">
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-8 w-16" />
+    </div>
+  )
+}
+
+export function SearchResultSkeleton() {
+  return (
+    <div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5 space-y-4">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-48" />
+        </div>
+        <Skeleton className="h-6 w-12" />
+      </div>
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-3 w-40" />
+    </div>
+  )
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 p-3 bg-white/5 rounded-lg">
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/index.css

@@ -130,7 +130,54 @@
   background: rgba(59, 130, 246, 0.2);
 }
 
+/* Page transitions and animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(-8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out forwards;
+}
 
+.animate-scale-in {
+  animation: scaleIn 0.2s ease-out forwards;
+}
+
+/* Staggered animations for lists */
+.stagger-1 { animation-delay: 0.05s; }
+.stagger-2 { animation-delay: 0.1s; }
+.stagger-3 { animation-delay: 0.15s; }
+.stagger-4 { animation-delay: 0.2s; }
+.stagger-5 { animation-delay: 0.25s; }
+
+/* Focus visible states */
+.focus-ring {
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b];
+}
+
+/* Smooth hover transitions */
+.hover-lift {
+  @apply transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg;
+}
+
+.hover-glow {
+  @apply transition-all duration-200 hover:shadow-[0_0_20px_rgba(59,130,246,0.3)];
+}
 
 @layer base {
   * {