Update how timeline panel renders when loading content and having none.

lib/controls/timeline/timeline_panel.dart

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
+import 'package:relatica/controls/padding.dart';
 import 'package:relatica/globals.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 import '../../models/TimelineIdentifiers.dart';
+import '../../services/network_status_service.dart';
 import '../../services/timeline_manager.dart';
 import '../../utils/active_profile_selector.dart';
 import 'post_control.dart';
@@ -34,59 +36,81 @@ class TimelinePanel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     _logger.finer('Build');
+    final nss = getIt<NetworkStatusService>();
     final manager = context
         .watch<ActiveProfileSelector<TimelineManager>>()
         .activeEntry
         .value;
     final items = manager.getTimeline(timeline);
-    return RefreshIndicator(
-      onRefresh: () async {
-        update(context, manager);
-        return;
-      },
-      child: items.isEmpty
-          ? Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  ElevatedButton(
-                      onPressed: () => manager.updateTimeline(
-                          timeline, TimelineRefreshType.refresh),
-                      child: const Text('Load Posts'))
-                ],
-              ),
-            )
-          : ScrollablePositionedList.builder(
-              itemScrollController: controller,
-              physics: const AlwaysScrollableScrollPhysics(),
-              itemBuilder: (context, index) {
-                if (index == 0) {
-                  return TextButton(
-                      onPressed: () async => await manager.updateTimeline(
-                          timeline, TimelineRefreshType.loadNewer),
-                      child: const Text('Load newer posts'));
-                }
 
-                if (index == items.length + 1) {
-                  return TextButton(
-                      onPressed: () async => await manager.updateTimeline(
-                          timeline, TimelineRefreshType.loadOlder),
-                      child: const Text('Load older posts'));
-                }
-                final itemIndex = index - 1;
-                final item = items[itemIndex];
-                TimelinePanel._logger.finest(
-                    'Building item: $itemIndex: ${item.entry.toShortString()}');
-                return PostControl(
-                  originalItem: item,
-                  scrollToId: item.id,
-                  openRemote: false,
-                  showStatusOpenButton: true,
-                  isRoot: false,
-                );
-              },
-              itemCount: items.length + 2,
+    return ValueListenableBuilder(
+      valueListenable: nss.timelineLoadingStatus,
+      builder: (BuildContext context, bool loading, Widget? _) {
+        if (items.isEmpty && loading) {
+          return const Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text('Loading Posts'),
+              ],
             ),
+          );
+        }
+
+        if (items.isEmpty) {
+          return Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Text('No posts loaded'),
+                const VerticalPadding(),
+                ElevatedButton(
+                    onPressed: () => manager.updateTimeline(
+                        timeline, TimelineRefreshType.refresh),
+                    child: const Text('Load Posts'))
+              ],
+            ),
+          );
+        }
+
+        return RefreshIndicator(
+          onRefresh: () async {
+            update(context, manager);
+            return;
+          },
+          child: ScrollablePositionedList.builder(
+            itemScrollController: controller,
+            physics: const AlwaysScrollableScrollPhysics(),
+            itemBuilder: (context, index) {
+              if (index == 0) {
+                return TextButton(
+                    onPressed: () async => await manager.updateTimeline(
+                        timeline, TimelineRefreshType.loadNewer),
+                    child: const Text('Load newer posts'));
+              }
+
+              if (index == items.length + 1) {
+                return TextButton(
+                    onPressed: () async => await manager.updateTimeline(
+                        timeline, TimelineRefreshType.loadOlder),
+                    child: const Text('Load older posts'));
+              }
+              final itemIndex = index - 1;
+              final item = items[itemIndex];
+              TimelinePanel._logger.finest(
+                  'Building item: $itemIndex: ${item.entry.toShortString()}');
+              return PostControl(
+                originalItem: item,
+                scrollToId: item.id,
+                openRemote: false,
+                showStatusOpenButton: true,
+                isRoot: false,
+              );
+            },
+            itemCount: items.length + 2,
+          ),
+        );
+      },
     );
   }
 }