lazy locker image loading

pebble-dev · Aug 7, 2024 · 570732d · 570732d
1 parent c6d2d21
commit 570732d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/lib/ui/common/components/cobble_tile.dart b/lib/ui/common/components/cobble_tile.dart
@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cobble/ui/common/components/cobble_accordion.dart';
 import 'package:cobble/ui/common/icons/back_comp_icon.dart';
 import 'package:cobble/ui/common/icons/system_app_icon.dart';
@@ -353,7 +354,7 @@ class CobbleTile extends StatelessWidget {
 
   /// Will change IconData or ImageProvider to Widget
   static Widget _leadingToWidget(Object? leading, {double size = 25}) {
-    assert(leading == null || leading is IconData || leading is ImageProvider || leading is BackCompIcon || leading is SystemAppIcon || leading is Decoration);
+    assert(leading == null || leading is IconData || leading is ImageProvider || leading is BackCompIcon || leading is SystemAppIcon || leading is Decoration || leading is CachedNetworkImage);
     if (leading is IconData && leading == reservedIconSpace)
       return SizedBox(width: size + 16.0);
     if (leading is IconData && leading != reservedIconSpace)
@@ -375,6 +376,12 @@ class CobbleTile extends StatelessWidget {
         height: 32.0,
         decoration: leading,
       );
+    if (leading is CachedNetworkImage)
+      return SizedBox(
+        width: size,
+        height: size,
+        child: leading,
+      );
     return Container();
   }
 }
diff --git a/lib/ui/home/tabs/locker_tab/apps_item.dart b/lib/ui/home/tabs/locker_tab/apps_item.dart
@@ -2,6 +2,7 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cobble/domain/db/models/app.dart';
 import 'package:cobble/domain/apps/app_manager.dart';
 import 'package:cobble/domain/entities/hardware_platform.dart';
+import 'package:cobble/domain/logging.dart';
 import 'package:cobble/ui/common/components/cobble_button.dart';
 import 'package:cobble/ui/common/components/cobble_tile.dart';
 import 'package:cobble/ui/common/icons/system_app_icon.dart';
@@ -51,7 +52,11 @@ class AppsItem extends ConsumerWidget {
             SizedBox(width: 57),
           Expanded(
             child: CobbleTile.app(
-              leading: iconUrl != null ? CachedNetworkImageProvider(iconUrl!) : SystemAppIcon(app.uuid),
+              leading: iconUrl != null ? CachedNetworkImage(imageUrl: iconUrl!, errorListener: (e) {
+                Log.e("Error loading app image: $e");
+              },
+                placeholder: (context, url) => SystemAppIcon(app.uuid),
+              ): SystemAppIcon(app.uuid),
               title: app.longName,
               subtitle: app.company,
               onTap: () => AppsSheet.showModal(

diff --git a/lib/ui/home/tabs/locker_tab/faces_sheet.dart b/lib/ui/home/tabs/locker_tab/faces_sheet.dart
@@ -13,6 +13,8 @@ import 'package:share_plus/share_plus.dart';
 import 'package:cobble/ui/theme/with_cobble_theme.dart';
 import 'package:cobble/domain/entities/hardware_platform.dart';
 
+import '../../../../domain/logging.dart';
+
 class FacesPreview extends StatelessWidget {
   FacesPreview({
     required this.face,
@@ -35,36 +37,51 @@ class FacesPreview extends StatelessWidget {
         face.supportedHardware[0] == WatchType.chalk;
     circleWatchface =
         compatible && (circleConnected ?? false) || !compatible && circleOnly;
-    return Container(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          ClipRRect(
-            child: Image(
-              image: (listUrl != null ? CachedNetworkImageProvider(listUrl!) : Svg('images/temp_watch_face.svg')) as ImageProvider,
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        ClipRRect(
+          borderRadius: BorderRadius.circular(circleWatchface ? 46.0 : 6.0),
+          child: listUrl == null ?
+          Image(
+            image: const Svg('images/temp_watch_face.svg'),
+            width: 92,
+            height: circleWatchface ? 92 : 108,
+            alignment: Alignment.center,
+            fit: BoxFit.cover,
+          ) : CachedNetworkImage(
+            imageUrl: listUrl!,
+            width: 92,
+            height: circleWatchface ? 92 : 108,
+            alignment: Alignment.center,
+            fit: BoxFit.cover,
+            errorListener: (e) {
+              Log.e("Error loading face image: $e");
+            },
+            placeholder: (context, url) => Image(
+              image: const Svg('images/temp_watch_face.svg'),
               width: 92,
               height: circleWatchface ? 92 : 108,
-              alignment: AlignmentDirectional.center,
+              alignment: Alignment.center,
               fit: BoxFit.cover,
             ),
-            borderRadius: BorderRadius.circular(circleWatchface ? 46.0 : 6.0),
-          ),
-          SizedBox(height: 8),
-          Text(
-            face.longName + (extended ? " ${face.version}" : ""),
-            style: context.textTheme.headlineMedium,
           ),
-          SizedBox(height: 4),
-          Text(
-            face.company,
-            style: context.textTheme.bodyMedium!.copyWith(
-              color: context.textTheme.bodyMedium!.color!.withOpacity(
-                context.scheme!.muted.opacity,
-              ),
+        ),
+        SizedBox(height: 8),
+        Text(
+          face.longName + (extended ? " ${face.version}" : ""),
+          style: context.textTheme.headlineMedium,
+        ),
+        SizedBox(height: 4),
+        Text(
+          face.company,
+          style: context.textTheme.bodyMedium!.copyWith(
+            color: context.textTheme.bodyMedium!.color!.withOpacity(
+              context.scheme!.muted.opacity,
             ),
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }