feat: Add SkeletonTimeline widget for loading states and update main and home page to use it

lib/main.dart

···
 import 'package:grain/screens/login_page.dart';
 
 import 'providers/profile_provider.dart';
+import 'widgets/skeleton_timeline.dart';
 
 class AppConfig {
   static late final String apiUrl;
···
     Widget home;
     if (_loading) {
       home = Scaffold(
-        body: Center(
-          child: CircularProgressIndicator(strokeWidth: 2, color: AppTheme.primaryColor),
+        appBar: AppBar(title: const Text('Grain')),
+        body: Column(
+          children: [
+            Expanded(
+              child: SkeletonTimeline(padding: EdgeInsets.symmetric(vertical: 24, horizontal: 8)),
+            ),
+          ],
         ),
       );
     } else {

lib/screens/home_page.dart

···
 import 'package:grain/screens/create_gallery_page.dart';
 import 'package:grain/widgets/app_drawer.dart';
 import 'package:grain/widgets/bottom_nav_bar.dart';
+import 'package:grain/widgets/skeleton_timeline.dart';
 import 'package:grain/widgets/timeline_item.dart';
 
 import '../providers/gallery_cache_provider.dart';
···
       child: CustomScrollView(
         key: const PageStorageKey('timeline'),
         slivers: [
-          if (uris.isEmpty && loading)
-            SliverFillRemaining(
-              hasScrollBody: false,
-              child: Center(
-                child: CircularProgressIndicator(
-                  strokeWidth: 2,
-                  color: Theme.of(context).colorScheme.primary,
-                ),
-              ),
-            ),
+          if (uris.isEmpty && loading) const SkeletonTimeline(useSliver: true),
           if (uris.isEmpty && !loading)
             SliverFillRemaining(
               hasScrollBody: false,
···
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final avatarUrl = apiService.currentUser?.avatar;
-    if (apiService.currentUser == null) {
-      return Scaffold(
-        body: Center(
-          child: CircularProgressIndicator(strokeWidth: 2, color: theme.colorScheme.primary),
-        ),
-      );
-    }
     // Home page: show default timeline only
     if (!showProfile && !showNotifications && !showExplore) {
       return Scaffold(

lib/widgets/skeleton_timeline.dart

···
+import 'package:flutter/material.dart';
+
+class SkeletonTimeline extends StatelessWidget {
+  final int itemCount;
+  final bool useSliver;
+  final EdgeInsetsGeometry padding;
+  const SkeletonTimeline({
+    super.key,
+    this.itemCount = 6,
+    this.useSliver = false,
+    this.padding = const EdgeInsets.symmetric(vertical: 24, horizontal: 8),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (useSliver) {
+      return SliverPadding(
+        padding: padding,
+        sliver: SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) => _buildSkeletonItem(context, index),
+            childCount: itemCount,
+          ),
+        ),
+      );
+    } else {
+      return ListView.builder(
+        itemCount: itemCount,
+        padding: padding,
+        itemBuilder: (context, index) => _buildSkeletonItem(context, index),
+      );
+    }
+  }
+
+  Widget _buildSkeletonItem(BuildContext context, int index) {
+    final theme = Theme.of(context);
+    final Color skeletonColor = theme.colorScheme.surfaceContainerHighest.withAlpha(128);
+    final double fade = 1.0 - (index / itemCount) * 0.3;
+    final Color fadedColor = skeletonColor.withOpacity(fade);
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 24),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Container(
+                width: 36,
+                height: 36,
+                decoration: BoxDecoration(color: fadedColor, shape: BoxShape.circle),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(height: 14, width: 120, color: fadedColor),
+                    const SizedBox(height: 6),
+                    Container(height: 12, width: 80, color: fadedColor),
+                  ],
+                ),
+              ),
+              Container(height: 12, width: 40, color: fadedColor),
+            ],
+          ),
+          const SizedBox(height: 12),
+          Container(
+            height: 180,
+            width: double.infinity,
+            color: fadedColor,
+            margin: const EdgeInsets.symmetric(horizontal: 2),
+          ),
+          const SizedBox(height: 12),
+          Container(
+            height: 16,
+            width: 160,
+            color: fadedColor,
+            margin: const EdgeInsets.only(left: 2),
+          ),
+          const SizedBox(height: 8),
+          Container(
+            height: 12,
+            width: double.infinity,
+            color: fadedColor,
+            margin: const EdgeInsets.only(left: 2),
+          ),
+          const SizedBox(height: 16),
+          Row(
+            children: List.generate(
+              3,
+              (i) => Padding(
+                padding: const EdgeInsets.only(right: 12),
+                child: Container(
+                  width: 32,
+                  height: 32,
+                  decoration: BoxDecoration(
+                    color: fadedColor,
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/timeline_item.dart

···
   Widget build(BuildContext context, WidgetRef ref) {
     final gallery = ref.watch(galleryCacheProvider)[galleryUri];
     if (gallery == null) {
-      return const SizedBox.shrink(); // or a loading/placeholder widget
+      return const SizedBox.shrink();
     }
     final actor = gallery.creator;
     final createdAt = gallery.createdAt;
···
                 onTap:
                     onProfileTap ??
                     () {
-                      if (actor != null) {
+                      if (actor?.did != null) {
                         Navigator.of(context).push(
                           MaterialPageRoute(
-                            builder: (context) => ProfilePage(did: actor.did, showAppBar: true),
+                            builder: (context) => ProfilePage(did: actor!.did, showAppBar: true),
                           ),
                         );
                       }
···
                 child: CircleAvatar(
                   radius: 18,
                   backgroundColor: theme.scaffoldBackgroundColor,
-                  child: (actor != null && (actor.avatar?.isNotEmpty ?? false))
+                  child: (actor?.avatar?.isNotEmpty ?? false)
                       ? ClipOval(
                           child: AppImage(
-                            url: actor.avatar,
+                            url: actor!.avatar ?? '',
                             width: 36,
                             height: 36,
                             fit: BoxFit.cover,
···
                       child: Text.rich(
                         TextSpan(
                           children: [
-                            if (actor != null && (actor.displayName?.isNotEmpty ?? false))
+                            if (actor?.displayName?.isNotEmpty ?? false)
                               TextSpan(
-                                text: actor.displayName,
+                                text: actor!.displayName ?? '',
                                 style: theme.textTheme.titleMedium?.copyWith(
                                   fontWeight: FontWeight.w600,
                                   fontSize: 16,
···
             padding: const EdgeInsets.only(top: 4, left: 8, right: 8),
             child: FacetedText(
               text: gallery.description ?? '',
-              facets: gallery.facets,
+              facets: gallery.facets ?? [],
               style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
               linkStyle: theme.textTheme.bodySmall?.copyWith(
                 color: theme.colorScheme.primary,
···
             child: GalleryActionButtons(
               gallery: gallery,
               parentContext: context,
-              currentUserDid: gallery.creator?.did, // or apiService.currentUser?.did if available
+              currentUserDid: gallery.creator?.did ?? '',
               isLoggedIn: isLoggedIn,
             ),
           ),