feat: Use the search eye animation from the POC (#4833)

* Use the search eye animation from the POC * Oops I forgot the translation --------- Co-authored-by: Pierre Slamich <[email protected]>
openfoodfacts · Nov 24, 2023 · 09d32c1 · 09d32c1
1 parent 109e721
commit 09d32c1
Show file tree

Hide file tree

Showing 6 changed files with 366 additions and 15 deletions.
diff --git a/packages/smooth_app/assets/animations/off.riv b/packages/smooth_app/assets/animations/off.riv
diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -1675,6 +1675,13 @@
             }
         }
     },
+    "product_search_loading_message":"Your search of {search} is in progress.\n\nPlease wait a few seconds…",
+    "@product_search_loading_message": {
+        "description": "This message will be displayed when a search is in progress.",
+        "search": {
+            "type": "String"
+        }
+    },
     "user_search_contributor_title": "Products I added",
     "@user_search_contributor_title": {
         "description": "User search (contributor): list tile title"

diff --git a/packages/smooth_app/lib/main.dart b/packages/smooth_app/lib/main.dart
@@ -31,6 +31,7 @@ import 'package:smooth_app/helpers/permission_helper.dart';
 import 'package:smooth_app/pages/navigator/app_navigator.dart';
 import 'package:smooth_app/pages/onboarding/onboarding_flow_navigator.dart';
 import 'package:smooth_app/query/product_query.dart';
+import 'package:smooth_app/resources/app_animations.dart';
 import 'package:smooth_app/services/smooth_services.dart';
 import 'package:smooth_app/themes/color_provider.dart';
 import 'package:smooth_app/themes/contrast_provider.dart';
@@ -224,12 +225,14 @@ class _SmoothAppState extends State<SmoothApp> {
             provide<ContinuousScanModel>(_continuousScanModel),
             provide<PermissionListener>(_permissionListener),
           ],
-          child: AppNavigator(
-            observers: <NavigatorObserver>[
-              SentryNavigatorObserver(),
-              matomoObserver,
-            ],
-            child: Builder(builder: _buildApp),
+          child: AnimationsLoader(
+            child: AppNavigator(
+              observers: <NavigatorObserver>[
+                SentryNavigatorObserver(),
+                matomoObserver,
+              ],
+              child: Builder(builder: _buildApp),
+            ),
           ),
         );
       },

diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart
@@ -24,9 +24,11 @@ import 'package:smooth_app/pages/personalized_ranking_page.dart';
 import 'package:smooth_app/pages/product/common/product_list_item_simple.dart';
 import 'package:smooth_app/pages/product/common/product_query_page_helper.dart';
 import 'package:smooth_app/query/paged_product_query.dart';
+import 'package:smooth_app/resources/app_animations.dart';
 import 'package:smooth_app/widgets/ranking_floating_action_button.dart';
 import 'package:smooth_app/widgets/smooth_app_bar.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
+import 'package:smooth_app/widgets/smooth_text.dart';
 
 class ProductQueryPage extends StatefulWidget {
   const ProductQueryPage({
@@ -110,18 +112,15 @@ class _ProductQueryPageState extends State<ProductQueryPage>
             );
           case LoadingStatus.LOADING:
             if (_model.isEmpty()) {
-              return _EmptyScreen(
-                screenSize: screenSize,
-                name: widget.name,
-                emptiness: const CircularProgressIndicator.adaptive(),
+              return _LoadingScreen(
+                title: widget.name,
               );
             }
             break;
           case LoadingStatus.LOADED:
             if (_model.isEmpty()) {
               // TODO(monsieurtanuki): should be tracked as well, shouldn't it?
               return _EmptyScreen(
-                screenSize: screenSize,
                 name: widget.name,
                 emptiness: _getEmptyText(
                   themeData,
@@ -290,7 +289,6 @@ class _ProductQueryPageState extends State<ProductQueryPage>
     final String errorMessage,
   ) {
     return _EmptyScreen(
-      screenSize: screenSize,
       name: widget.name,
       emptiness: Padding(
         padding: const EdgeInsets.all(SMALL_SPACE),
@@ -495,14 +493,12 @@ class _ProductQueryPageState extends State<ProductQueryPage>
 
 class _EmptyScreen extends StatelessWidget {
   const _EmptyScreen({
-    required this.screenSize,
     required this.name,
     required this.emptiness,
     this.actions,
     Key? key,
   }) : super(key: key);
 
-  final Size screenSize;
   final String name;
   final Widget emptiness;
   final List<Widget>? actions;
@@ -581,3 +577,38 @@ enum ProductQueryPageResult {
   editProductQuery,
   unknown,
 }
+
+class _LoadingScreen extends StatelessWidget {
+  const _LoadingScreen({
+    required this.title,
+  });
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final AppLocalizations appLocalizations = AppLocalizations.of(context);
+
+    return _EmptyScreen(
+      name: title,
+      emptiness: FractionallySizedBox(
+        widthFactor: 0.75,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            SearchEyeAnimation(
+              size: MediaQuery.sizeOf(context).width * 0.2,
+            ),
+            const SizedBox(height: VERY_LARGE_SPACE * 2),
+            TextHighlighter(
+              text: appLocalizations.product_search_loading_message(title),
+              filter: title,
+              softWrap: true,
+              textAlign: TextAlign.center,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}