Merge pull request #1525 from ubuntu/feat/shimmer-ratings-loading

feat: adding shimmer when the ratings are loading.
ubuntu · Aug 16, 2024 · 0c8d239 · 0c8d239
2 parents 5e0c661 + cf75cd9
commit 0c8d239
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 15 deletions.
diff --git a/packages/app_center/lib/deb/deb_page.dart b/packages/app_center/lib/deb/deb_page.dart
@@ -81,12 +81,12 @@ class _DebView extends StatelessWidget {
 
     final debInfos = <AppInfo>[
       (
-        label: l10n.snapPageVersionLabel,
+        label: Text(l10n.snapPageVersionLabel),
         value: Text(debModel.packageInfo?.packageId.version ?? '')
       ),
       if (debModel.component.urls.isNotEmpty)
         (
-          label: l10n.snapPageLinksLabel,
+          label: Text(l10n.snapPageLinksLabel),
           value: Column(
             children: debModel.component.urls
                 .where(

diff --git a/packages/app_center/lib/deb/local_deb_page.dart b/packages/app_center/lib/deb/local_deb_page.dart
@@ -46,15 +46,15 @@ class _LocalDebPage extends StatelessWidget {
     return AppPage(
       appInfos: [
         (
-          label: l10n.snapPageSizeLabel,
+          label: Text(l10n.snapPageSizeLabel),
           value: Text(context.formatByteSize(debData.details.size))
         ),
         (
-          label: l10n.snapPageLicenseLabel,
+          label: Text(l10n.snapPageLicenseLabel),
           value: Text(debData.details.license)
         ),
         (
-          label: l10n.snapPageLinksLabel,
+          label: Text(l10n.snapPageLinksLabel),
           value: Html(
             data: '<a href="${debData.details.url}">${debData.details.url}</a>',
             style: {'body': Style(margin: Margins.zero)},

diff --git a/packages/app_center/lib/snapd/snap_page.dart b/packages/app_center/lib/snapd/snap_page.dart
@@ -10,14 +10,17 @@ import 'package:app_center/snapd/snap_report.dart';
 import 'package:app_center/snapd/snapd.dart';
 import 'package:app_center/snapd/snapd_cache.dart';
 import 'package:app_center/store/store_app.dart';
+import 'package:app_center/widgets/shimmer_placeholder.dart';
 import 'package:app_center/widgets/widgets.dart';
+import 'package:app_center_ratings_client/app_center_ratings_client.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:intl/intl.dart';
+import 'package:shimmer/shimmer.dart';
 import 'package:snapd/snapd.dart';
 import 'package:ubuntu_widgets/ubuntu_widgets.dart';
 import 'package:url_launcher/url_launcher_string.dart';
@@ -26,7 +29,7 @@ import 'package:yaru/yaru.dart';
 const _kPrimaryButtonMaxWidth = 136.0;
 const _kChannelDropdownWidth = 220.0;
 
-typedef SnapInfo = ({String label, Widget value});
+typedef SnapInfo = ({Widget label, Widget value});
 
 class SnapPage extends ConsumerWidget {
   const SnapPage({required this.snapName, super.key});
@@ -75,7 +78,7 @@ class _SnapView extends StatelessWidget {
 
     final snapInfos = <SnapInfo>[
       (
-        label: l10n.snapPageConfinementLabel,
+        label: Text(l10n.snapPageConfinementLabel),
         value: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -93,31 +96,31 @@ class _SnapView extends StatelessWidget {
         ),
       ),
       (
-        label: l10n.snapPageDownloadSizeLabel,
+        label: Text(l10n.snapPageDownloadSizeLabel),
         value: Text(
           snapData.channelInfo != null
               ? context.formatByteSize(snapData.channelInfo!.size)
               : '',
         ),
       ),
       (
-        label: l10n.snapPageLicenseLabel,
+        label: Text(l10n.snapPageLicenseLabel),
         value: Text(snapData.snap.license ?? ''),
       ),
       (
-        label: l10n.snapPageVersionLabel,
+        label: Text(l10n.snapPageVersionLabel),
         value: Text(snapData.channelInfo?.version ?? snapData.snap.version),
       ),
       (
-        label: l10n.snapPagePublishedLabel,
+        label: Text(l10n.snapPagePublishedLabel),
         value: Text(
           snapData.channelInfo != null
               ? DateFormat.yMMMd().format(snapData.channelInfo!.releasedAt)
               : '',
         ),
       ),
       (
-        label: l10n.snapPageLinksLabel,
+        label: Text(l10n.snapPageLinksLabel),
         value: Column(
           children: [
             if (snapData.snap.website?.isNotEmpty ?? false)
@@ -263,17 +266,38 @@ class _SnapInfoBar extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final l10n = AppLocalizations.of(context);
     final ratingsModel = ref.watch(ratingsModelProvider(snap.name));
+    final isLightTheme = Theme.of(context).brightness == Brightness.light;
 
     final ratings = ratingsModel.whenOrNull(
       data: (ratingsData) => (
-        label: l10n.snapRatingsVotes(ratingsData.rating?.totalVotes ?? 0),
+        label: Text(l10n.snapRatingsVotes(ratingsData.rating?.totalVotes ?? 0)),
         value: Text(
           ratingsData.rating?.ratingsBand.localize(l10n) ?? '',
           style: TextStyle(
             color: ratingsData.rating?.ratingsBand.getColor(context),
           ),
         ),
       ),
+      loading: () => (
+        label: Shimmer.fromColors(
+          baseColor: isLightTheme ? kShimmerBaseLight : kShimmerBaseDark,
+          highlightColor:
+              isLightTheme ? kShimmerHighLightLight : kShimmerHighLightDark,
+          child: ShimmerPlaceholder(
+            child: Text(l10n.snapRatingsVotes(0)),
+          ),
+        ),
+        value: Shimmer.fromColors(
+          baseColor: isLightTheme ? kShimmerBaseLight : kShimmerBaseDark,
+          highlightColor:
+              isLightTheme ? kShimmerHighLightLight : kShimmerHighLightDark,
+          child: ShimmerPlaceholder(
+            child: Text(
+              RatingsBand.insufficientVotes.localize(l10n),
+            ),
+          ),
+        ),
+      ),
     );
 
     return AppInfoBar(

diff --git a/packages/app_center/lib/widgets/app_info_bar.dart b/packages/app_center/lib/widgets/app_info_bar.dart
@@ -1,7 +1,7 @@
 import 'package:app_center/layout.dart';
 import 'package:flutter/material.dart';
 
-typedef AppInfo = ({String label, Widget value});
+typedef AppInfo = ({Widget label, Widget value});
 
 class AppInfoBar extends StatelessWidget {
   const AppInfoBar({
@@ -27,7 +27,7 @@ class AppInfoBar extends StatelessWidget {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(info.label),
+                  info.label,
                   SelectionArea(
                     child: DefaultTextStyle.merge(
                       style: const TextStyle(fontWeight: FontWeight.w500),

diff --git a/packages/app_center/lib/widgets/shimmer_placeholder.dart b/packages/app_center/lib/widgets/shimmer_placeholder.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class ShimmerPlaceholder extends StatelessWidget {
+  const ShimmerPlaceholder({
+    required this.child,
+    super.key,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 2),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            color: Colors.white,
+            child: child,
+          ),
+        ],
+      ),
+    );
+  }
+}