refactor(mobile): log asyncvalue errors (#5327)

* refactor: scaffoldwhen to log errors during scaffold body render

* refactor: onError and onLoading scaffoldbody

* refactor: more scaffold body to custom extension

* refactor: add skiploadingonrefresh

* Snackbar color

---------

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/modules/search/views/all_motion_videos_page.dart

@@ -1,10 +1,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/all_motion_photos.provider.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 
 class AllMotionPhotosPage extends HookConsumerWidget {
   const AllMotionPhotosPage({super.key});
@@ -21,14 +21,10 @@ class AllMotionPhotosPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: motionPhotos.when(
-        data: (assets) => ImmichAssetGrid(
+      body: motionPhotos.widgetWhen(
+        onData: (assets) => ImmichAssetGrid(
           assets: assets,
         ),
-        error: (e, s) => Text(e.toString()),
-        loading: () => const Center(
-          child: ImmichLoadingIndicator(),
-        ),
       ),
     );
   }

mobile/lib/modules/search/views/all_people_page.dart

@@ -1,10 +1,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 
 class AllPeoplePage extends HookConsumerWidget {
   const AllPeoplePage({super.key});
@@ -23,12 +23,8 @@ class AllPeoplePage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: curatedPeople.when(
-        loading: () => const Center(child: ImmichLoadingIndicator()),
-        error: (err, stack) => Center(
-          child: Text('Error: $err'),
-        ),
-        data: (people) => ExploreGrid(
+      body: curatedPeople.widgetWhen(
+        onData: (people) => ExploreGrid(
           isPeople: true,
           curatedContent: people,
         ),

mobile/lib/modules/search/views/all_videos_page.dart

@@ -1,10 +1,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/all_video_assets.provider.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 
 class AllVideosPage extends HookConsumerWidget {
   const AllVideosPage({super.key});
@@ -21,14 +21,10 @@ class AllVideosPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: videos.when(
-        data: (assets) => ImmichAssetGrid(
+      body: videos.widgetWhen(
+        onData: (assets) => ImmichAssetGrid(
           assets: assets,
         ),
-        error: (e, s) => Text(e.toString()),
-        loading: () => const Center(
-          child: ImmichLoadingIndicator(),
-        ),
       ),
     );
   }

mobile/lib/modules/search/views/curated_location_page.dart

@@ -1,11 +1,11 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 import 'package:openapi/api.dart';
 
 class CuratedLocationPage extends HookConsumerWidget {
@@ -26,12 +26,8 @@ class CuratedLocationPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: curatedLocation.when(
-        loading: () => const Center(child: ImmichLoadingIndicator()),
-        error: (err, stack) => Center(
-          child: Text('Error: $err'),
-        ),
-        data: (curatedLocations) => ExploreGrid(
+      body: curatedLocation.widgetWhen(
+        onData: (curatedLocations) => ExploreGrid(
           curatedContent: curatedLocations
               .map(
                 (l) => CuratedContent(

mobile/lib/modules/search/views/person_result_page.dart

@@ -8,7 +8,6 @@ import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart'
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
 import 'package:immich_mobile/shared/models/store.dart' as isar_store;
-import 'package:immich_mobile/shared/ui/scaffold_error_body.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class PersonResultPage extends HookConsumerWidget {
@@ -112,7 +111,7 @@ class PersonResultPage extends HookConsumerWidget {
           ),
         ],
       ),
-      body: ref.watch(personAssetsProvider(personId)).scaffoldBodyWhen(
+      body: ref.watch(personAssetsProvider(personId)).widgetWhen(
             onData: (renderList) => ImmichAssetGrid(
               renderList: renderList,
               topWidget: Padding(
@@ -137,7 +136,6 @@ class PersonResultPage extends HookConsumerWidget {
                 ),
               ),
             ),
-            onError: const ScaffoldErrorBody(icon: Icons.person_off_outlined),
           ),
     );
   }

mobile/lib/modules/search/views/recently_added_page.dart

@@ -1,10 +1,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/recently_added.provider.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 
 class RecentlyAddedPage extends HookConsumerWidget {
   const RecentlyAddedPage({super.key});
@@ -21,14 +21,10 @@ class RecentlyAddedPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: recents.when(
-        data: (searchResponse) => ImmichAssetGrid(
+      body: recents.widgetWhen(
+        onData: (searchResponse) => ImmichAssetGrid(
           assets: searchResponse,
         ),
-        error: (e, s) => Text(e.toString()),
-        loading: () => const Center(
-          child: ImmichLoadingIndicator(),
-        ),
       ),
     );
   }

mobile/lib/modules/search/views/search_page.dart

@@ -3,6 +3,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
@@ -15,7 +16,7 @@ import 'package:immich_mobile/modules/search/ui/search_row_title.dart';
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/scaffold_error_body.dart';
 
 // ignore: must_be_immutable
 class SearchPage extends HookConsumerWidget {
@@ -73,10 +74,9 @@ class SearchPage extends HookConsumerWidget {
     buildPeople() {
       return SizedBox(
         height: imageSize,
-        child: curatedPeople.when(
-          loading: () => const Center(child: ImmichLoadingIndicator()),
-          error: (err, stack) => Center(child: Text('Error: $err')),
-          data: (people) => CuratedPeopleRow(
+        child: curatedPeople.widgetWhen(
+          onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
+          onData: (people) => CuratedPeopleRow(
             content: people.take(12).toList(),
             onTap: (content, index) {
               context.autoPush(
@@ -97,10 +97,9 @@ class SearchPage extends HookConsumerWidget {
     buildPlaces() {
       return SizedBox(
         height: imageSize,
-        child: curatedLocation.when(
-          loading: () => const Center(child: ImmichLoadingIndicator()),
-          error: (err, stack) => Center(child: Text('Error: $err')),
-          data: (locations) => CuratedPlacesRow(
+        child: curatedLocation.widgetWhen(
+          onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
+          onData: (locations) => CuratedPlacesRow(
             isMapEnabled: isMapEnabled,
             content: locations
                 .map(