Add placeholder to thumbnails & box art

lib/screens/home/top/category_streams.dart

@@ -73,6 +73,7 @@ class CategoryStreams extends StatelessWidget {
                             null,
                             '${artWidth}x$artHeight.jpg',
                           ),
+                          placeholder: (context, url) => const LoadingIndicator(),
                           color: const Color.fromRGBO(255, 255, 255, 0.5),
                           colorBlendMode: BlendMode.modulate,
                           fit: BoxFit.cover,

lib/screens/home/widgets/category_card.dart

@@ -5,6 +5,7 @@ import 'package:frosty/core/auth/auth_store.dart';
 import 'package:frosty/models/category.dart';
 import 'package:frosty/screens/home/stores/list_store.dart';
 import 'package:frosty/screens/home/top/category_streams.dart';
+import 'package:frosty/widgets/loading_indicator.dart';
 import 'package:provider/provider.dart';
 
 /// A tappable card widget that displays a category's box art and name.
@@ -43,6 +44,7 @@ class CategoryCard extends StatelessWidget {
             Expanded(
               child: CachedNetworkImage(
                 imageUrl: category.boxArtUrl.replaceRange(category.boxArtUrl.lastIndexOf('-') + 1, null, '${width}x$height.jpg'),
+                placeholder: (context, url) => const LoadingIndicator(),
               ),
             ),
             const SizedBox(height: 5.0),

lib/screens/home/widgets/stream_card.dart

@@ -12,6 +12,7 @@ import 'package:frosty/screens/channel/stores/chat_details_store.dart';
 import 'package:frosty/screens/channel/stores/chat_store.dart';
 import 'package:frosty/screens/channel/video_chat.dart';
 import 'package:frosty/screens/settings/stores/settings_store.dart';
+import 'package:frosty/widgets/loading_indicator.dart';
 import 'package:frosty/widgets/profile_picture.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
@@ -36,9 +37,13 @@ class StreamCard extends StatelessWidget {
     final time = DateTime.now();
     final cacheUrlExtension = time.day.toString() + time.hour.toString() + (time.minute ~/ 5).toString();
 
-    final thumbnail = CachedNetworkImage(
-      imageUrl: streamInfo.thumbnailUrl.replaceFirst('-{width}x{height}', '-${width}x$height') + cacheUrlExtension,
-      useOldImageOnUrlChange: true,
+    final thumbnail = AspectRatio(
+      aspectRatio: 16 / 9,
+      child: CachedNetworkImage(
+        imageUrl: streamInfo.thumbnailUrl.replaceFirst('-{width}x{height}', '-${width}x$height') + cacheUrlExtension,
+        placeholder: (context, url) => const LoadingIndicator(),
+        useOldImageOnUrlChange: true,
+      ),
     );
 
     final streamerName = regexEnglish.hasMatch(streamInfo.userName) ? streamInfo.userName : streamInfo.userName + ' (${streamInfo.userLogin})';

lib/widgets/loading_indicator.dart

@@ -8,13 +8,16 @@ class LoadingIndicator extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    if (subtitle == null) {
+      return const Center(child: CircularProgressIndicator.adaptive());
+    }
     return Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           const CircularProgressIndicator.adaptive(),
           SizedBox(height: spacing),
-          if (subtitle != null) subtitle!,
+          subtitle!,
         ],
       ),
     );