From e405564f4f19859295ae4f9f84ff3a10c2e6a2c3 Mon Sep 17 00:00:00 2001 From: Enzo Conty Date: Tue, 12 Dec 2023 11:57:53 +0100 Subject: [PATCH 1/2] feat: adding shimmer when the ratings are loading. --- packages/app_center/lib/deb/deb_page.dart | 4 +- packages/app_center/lib/snapd/snap_page.dart | 51 ++++++++++++------- .../app_center/lib/widgets/app_info_bar.dart | 4 +- .../app_center/lib/widgets/placeholders.dart | 27 ++++++++++ 4 files changed, 63 insertions(+), 23 deletions(-) create mode 100644 packages/app_center/lib/widgets/placeholders.dart diff --git a/packages/app_center/lib/deb/deb_page.dart b/packages/app_center/lib/deb/deb_page.dart index 4dc20b7fc..d5d853caf 100644 --- 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 = [ ( - 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/snapd/snap_page.dart b/packages/app_center/lib/snapd/snap_page.dart index 891044c91..902046930 100644 --- a/packages/app_center/lib/snapd/snap_page.dart +++ b/packages/app_center/lib/snapd/snap_page.dart @@ -1,16 +1,8 @@ +import 'dart:async'; + import 'package:app_center/constants.dart'; -import 'package:app_center/error/error.dart'; -import 'package:app_center/extensions/string_extensions.dart'; -import 'package:app_center/l10n.dart'; -import 'package:app_center/layout.dart'; -import 'package:app_center/manage/local_snap_providers.dart'; -import 'package:app_center/ratings/ratings.dart'; -import 'package:app_center/snapd/snap_action.dart'; -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/widgets.dart'; +import 'package:app_center/src/widgets/placeholders.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'; @@ -18,6 +10,7 @@ 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 +19,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 +68,7 @@ class _SnapView extends StatelessWidget { final snapInfos = [ ( - label: l10n.snapPageConfinementLabel, + label: Text(l10n.snapPageConfinementLabel), value: Row( mainAxisSize: MainAxisSize.min, children: [ @@ -93,7 +86,7 @@ class _SnapView extends StatelessWidget { ), ), ( - label: l10n.snapPageDownloadSizeLabel, + label: Text(l10n.snapPageDownloadSizeLabel), value: Text( snapData.channelInfo != null ? context.formatByteSize(snapData.channelInfo!.size) @@ -101,15 +94,15 @@ class _SnapView extends StatelessWidget { ), ), ( - 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) @@ -117,7 +110,7 @@ class _SnapView extends StatelessWidget { ), ), ( - label: l10n.snapPageLinksLabel, + label: Text(l10n.snapPageLinksLabel), value: Column( children: [ if (snapData.snap.website?.isNotEmpty ?? false) @@ -274,6 +267,26 @@ class _SnapInfoBar extends ConsumerWidget { ), ), ), + loading: () => ( + label: Shimmer.fromColors( + baseColor: light ? kShimmerBaseLight : kShimmerBaseDark, + highlightColor: + light ? kShimmerHighLightLight : kShimmerHighLightDark, + child: ShimmerPlaceholder( + child: Text(l10n.snapRatingsVotes(0)), + ), + ), + value: Shimmer.fromColors( + baseColor: light ? kShimmerBaseLight : kShimmerBaseDark, + highlightColor: + light ? 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 index 8fa2f4ff7..1b5694397 100644 --- 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/placeholders.dart b/packages/app_center/lib/widgets/placeholders.dart new file mode 100644 index 000000000..a98e901ae --- /dev/null +++ b/packages/app_center/lib/widgets/placeholders.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +class ShimmerPlaceholder extends StatelessWidget { + final Widget child; + + const ShimmerPlaceholder({ + Key? key, + required this.child, + }) : super(key: key); + + @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, + ), + ], + ), + ); + } +} From cf75cd9586a99f00c151d18f49eecc69c52dcba3 Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Fri, 16 Aug 2024 14:36:49 +0200 Subject: [PATCH 2/2] chore: Fix up analyze issues from merge --- .../app_center/lib/deb/local_deb_page.dart | 6 ++--- packages/app_center/lib/snapd/snap_page.dart | 27 +++++++++++++------ ...eholders.dart => shimmer_placeholder.dart} | 8 +++--- 3 files changed, 26 insertions(+), 15 deletions(-) rename packages/app_center/lib/widgets/{placeholders.dart => shimmer_placeholder.dart} (93%) diff --git a/packages/app_center/lib/deb/local_deb_page.dart b/packages/app_center/lib/deb/local_deb_page.dart index 2cb9b7407..678bf6130 100644 --- 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: '${debData.details.url}', 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 index 902046930..32ff42902 100644 --- a/packages/app_center/lib/snapd/snap_page.dart +++ b/packages/app_center/lib/snapd/snap_page.dart @@ -1,7 +1,17 @@ -import 'dart:async'; - import 'package:app_center/constants.dart'; -import 'package:app_center/src/widgets/placeholders.dart'; +import 'package:app_center/error/error.dart'; +import 'package:app_center/extensions/string_extensions.dart'; +import 'package:app_center/l10n.dart'; +import 'package:app_center/layout.dart'; +import 'package:app_center/manage/local_snap_providers.dart'; +import 'package:app_center/ratings/ratings.dart'; +import 'package:app_center/snapd/snap_action.dart'; +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'; @@ -256,10 +266,11 @@ 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( @@ -269,17 +280,17 @@ class _SnapInfoBar extends ConsumerWidget { ), loading: () => ( label: Shimmer.fromColors( - baseColor: light ? kShimmerBaseLight : kShimmerBaseDark, + baseColor: isLightTheme ? kShimmerBaseLight : kShimmerBaseDark, highlightColor: - light ? kShimmerHighLightLight : kShimmerHighLightDark, + isLightTheme ? kShimmerHighLightLight : kShimmerHighLightDark, child: ShimmerPlaceholder( child: Text(l10n.snapRatingsVotes(0)), ), ), value: Shimmer.fromColors( - baseColor: light ? kShimmerBaseLight : kShimmerBaseDark, + baseColor: isLightTheme ? kShimmerBaseLight : kShimmerBaseDark, highlightColor: - light ? kShimmerHighLightLight : kShimmerHighLightDark, + isLightTheme ? kShimmerHighLightLight : kShimmerHighLightDark, child: ShimmerPlaceholder( child: Text( RatingsBand.insufficientVotes.localize(l10n), diff --git a/packages/app_center/lib/widgets/placeholders.dart b/packages/app_center/lib/widgets/shimmer_placeholder.dart similarity index 93% rename from packages/app_center/lib/widgets/placeholders.dart rename to packages/app_center/lib/widgets/shimmer_placeholder.dart index a98e901ae..187b42cb9 100644 --- a/packages/app_center/lib/widgets/placeholders.dart +++ b/packages/app_center/lib/widgets/shimmer_placeholder.dart @@ -1,12 +1,12 @@ import 'package:flutter/material.dart'; class ShimmerPlaceholder extends StatelessWidget { - final Widget child; - const ShimmerPlaceholder({ - Key? key, required this.child, - }) : super(key: key); + super.key, + }); + + final Widget child; @override Widget build(BuildContext context) {