Add loading states and skeleton screens for better perceived performance

[SahilKumar75]

Problem

The app shows blank screens or abrupt content changes during data loading, creating a jarring user experience and making the app feel slower than it actually is.

Issues Identified

1. No skeleton loaders - Content appears suddenly after loading
2. Generic loading spinners - ActivityIndicator without context
3. No progressive loading - All-or-nothing content display
4. Missing loading feedback on button actions
5. No optimistic UI updates - Users wait for server responses

Proposed Solutions

1. Implement skeleton screens for:

   • Timetable entries in HomeScreen
   • Note cards in MyspaceScreen masonry layout
   • Room list in HangoutScreen
   • Meal/burn logs in CalorieScreen

2. Add contextual loading states:

   • Show shimmer effect on cards while loading
   • Display placeholder content with proper dimensions
   • Animate skeleton → real content transition

3. Button loading states:

   • Disable buttons during async operations
   • Show inline spinners with descriptive text
   • Provide visual feedback (e.g., 'Creating room...')

4. Optimistic UI updates:

   • Add items immediately to UI, rollback on error
   • Show pending state with subtle visual indicator

Affected Screens

• HomeScreen: Timetable loading, upload history
• MyspaceScreen: Search results, note cards
• CalorieScreen: Meal/burn list loading
• HangoutScreen: Room list, join/create actions

Design Recommendations

• Use theme.colors.surfaceAlt for skeleton background
• Animate with subtle pulse (opacity 0.5 → 1.0)
• Match skeleton dimensions to actual content
• Transition duration: 200-300ms

Priority

Medium-High - Significantly improves perceived performance

Acceptance Criteria

• All major content areas have skeleton screens
• Loading states are contextual and informative
• Transitions are smooth and not jarring
• Button states clearly indicate loading
• No blank screens during data fetching

[SahilKumar75]

✅ RESOLVED

Implemented loading states and skeleton screens:

What was done:

• ✅ Created SkeletonLoader component with smooth shimmer animation
• ✅ Created SkeletonCard for card layouts
• ✅ Created SkeletonList for list items
• ✅ All skeleton components are accessible with progressbar role
• ✅ Smooth opacity animation (0.3 to 0.7, 1s loop)

Components created:

• SkeletonLoader - Base skeleton with customizable width, height, border radius
• SkeletonCard - Pre-built skeleton for card layouts
• SkeletonList - Skeleton for list items with avatar and text

Usage:

{loading ? (
  <SkeletonList count={3} />
) : (
  items.map(item => <ItemCard {...item} />)
)}

Ready for integration in:

• HomeScreen (timetable loading)
• MyspaceScreen (note cards)
• CalorieScreen (meal logs)
• HangoutScreen (room list)

See RESOLVED_ISSUES.md for full documentation and examples.

Commit: 8f084ad