Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/ add loading screen for SKS Menu #427

Merged
merged 33 commits into from
Dec 9, 2024
Merged

feat/ add loading screen for SKS Menu #427

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
da37b5e
SKS Menu (#387)
mikolaj-jalocha Nov 12, 2024
ebf6869
Add padding to all elements if there is safe space causes by notch et…
Rejfi Nov 19, 2024
0f3599b
feat: add interval refresh on the sks people counter (#415)
thesun901 Nov 20, 2024
73eb38e
fix(map-view): update map_view_config.dart - Use preferred tile.opens…
danieldegroot2 Nov 20, 2024
97ba4cd
Merge remote-tracking branch 'origin/main'
BombardierBulge Nov 23, 2024
ef8e97c
add shimmer loading screen for SKS Menu
BombardierBulge Nov 24, 2024
1fe2fca
add loading screen for SKS Menu
BombardierBulge Nov 24, 2024
0a99fb0
fix for SKS Menu loading screen
BombardierBulge Nov 29, 2024
15f17fa
fix for SKS Menu loading screen
BombardierBulge Nov 29, 2024
676a32e
feat: add custom rest caching framework (#426)
tomasz-trela Nov 24, 2024
95a35a6
feat: add home screen nav actions (#430)
gry-mar Nov 25, 2024
46f3d82
fix: adapt to new format from api & fix old date shown despite menu b…
mikolaj-jalocha Nov 25, 2024
a514fe7
fix: fix sorting order on sks menu screen to resembles one shown on s…
mikolaj-jalocha Nov 25, 2024
26a5859
fix: update translation so that it resembles one shown at sks menu we…
mikolaj-jalocha Nov 25, 2024
3860274
feat: clean up the home view layout
simon-the-shark Nov 25, 2024
257b04e
fix(bottom-nav-bar): rollback the guide icon
simon-the-shark Nov 25, 2024
e309efa
docs: add more insight on the sks url
simon-the-shark Nov 25, 2024
90e1bcb
feat: move sks people indicator
simon-the-shark Nov 25, 2024
2f1600f
fix: correct pop view app bar buttons' titles
simon-the-shark Nov 25, 2024
a656a76
chore: bump build
simon-the-shark Nov 25, 2024
4bed94a
feat: implement review request open store (#436)
thesun901 Nov 27, 2024
45a73d2
refactor: app store rating service (#437)
thesun901 Nov 27, 2024
ffe9c55
fix: licence dialog small screen #355 (#439)
Rejfi Nov 28, 2024
10ce488
docs: change github handbook link (#441)
Rei-x Nov 29, 2024
75be777
feat(sks-menu): add lottie animation on error (#428)
mmzek Nov 29, 2024
bc9cda5
docs: add link to docs (#447)
Rei-x Nov 30, 2024
750ba0f
feat: add navigation aware back button (#440)
simon-the-shark Nov 30, 2024
402eba4
fix(science-clubs): shadows on apply filter button (#446)
BombardierBulge Nov 30, 2024
13c82d8
Merge branch 'main' of https://github.com/Solvro/mobile-topwr
BombardierBulge Nov 30, 2024
5dd25a7
/fix shimmer loading final form
BombardierBulge Dec 8, 2024
848e896
/fix shimmer loading final form
BombardierBulge Dec 8, 2024
cfce4ba
/fix shimmer loading final form
BombardierBulge Dec 8, 2024
9d8468a
/fix shimmer loading final form
BombardierBulge Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions lib/features/sks-menu/presentation/sks_menu_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import "package:flutter_riverpod/flutter_riverpod.dart";
import "../../../config/ui_config.dart";
import "../../../utils/context_extensions.dart";
import "../../../widgets/detail_views/detail_view_app_bar.dart";

import "../../home_view/widgets/paddings.dart";
import "../data/models/dish_category_enum.dart";
import "../data/models/sks_menu_data.dart";
import "../data/repository/sks_menu_repository.dart";
import "widgets/sks_menu_data_source_link.dart";
import "widgets/sks_menu_header.dart";
import "widgets/sks_menu_section.dart";
import "widgets/sks_menu_view_loading.dart";

@RoutePage()
class SksMenuView extends ConsumerWidget {
Expand All @@ -36,11 +38,7 @@ class SksMenuView extends ConsumerWidget {
),
),
),
loading: () => const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
),
loading: SksMenuViewLoading.new,
);
}
}
Expand All @@ -55,7 +53,7 @@ class _SksMenuView extends StatelessWidget {
if (sksMenuData.isEmpty) {
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
child: SksMenuViewLoading(),
),
);
}
Expand Down
20 changes: 20 additions & 0 deletions lib/features/sks-menu/presentation/widgets/sks_menu_header.dart
View file
Open in desktop
mikolaj-jalocha marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";

import "../../../../config/ui_config.dart";
import "../../../../theme/app_theme.dart";
import "../../../../utils/context_extensions.dart";
import "../../../../utils/datetime_utils.dart";
import "../../../../widgets/loading_widgets/shimmer_loading.dart";

class SksMenuHeader extends StatelessWidget {
const SksMenuHeader({
Expand Down Expand Up @@ -49,3 +51,21 @@ class SksMenuHeader extends StatelessWidget {
);
}
}

class SksMenuHeaderLoading extends StatelessWidget {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class could be private.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class could be private and moved to sks_menu_view_loading

const SksMenuHeaderLoading({super.key});

@override
Widget build(BuildContext context) {
return ShimmerLoadingItem(
child: Container(
decoration: BoxDecoration(
color: context.colorTheme.whiteSoap,
borderRadius: BorderRadius.circular(SksMenuConfig.borderRadius),
),
width: double.infinity,
height: 180,
),
);
}
}
39 changes: 39 additions & 0 deletions lib/features/sks-menu/presentation/widgets/sks_menu_tiles.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import "package:separate/separate.dart";

import "../../../../config/ui_config.dart";
import "../../../../theme/app_theme.dart";
import "../../../../widgets/loading_widgets/shimmer_loading.dart";
import "../../../../widgets/my_expansion_tile.dart";
import "../../data/models/sks_menu_data.dart";

Expand Down Expand Up @@ -74,3 +75,41 @@ class SksMenuDishDetailsTile extends StatelessWidget {
);
}
}

class SksMenuTilesLoading extends StatelessWidget {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class could be private.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class could be private and moved to sks_menu_view_loading

Copy link
Contributor Author

@BombardierBulge BombardierBulge Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a problem accessing context.colorTheme.whiteSoap when SksMenuTilesLoading was moved to sks_menu_view_loading. How can I fix this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

White soap here is optional I guess (since we re using shimmer) , you can use whatever colour you prefer or use Colour consts (see my commit with sks menu or draft commit with chart)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% certain. Colour here could be even pink, it completely doesnt matter

const SksMenuTilesLoading();

@override
Widget build(BuildContext context) {
return const ShimmerLoadingItem(
child: Column(
BombardierBulge marked this conversation as resolved.
Show resolved Hide resolved
children: [
LoadingTitle(),
LoadingTitle(),
LoadingTitle(),
],
),
);
}
}

class LoadingTitle extends StatelessWidget {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This class could be private

const LoadingTitle({
super.key,
});

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: SksMenuConfig.paddingSmall),
child: Container(
decoration: BoxDecoration(
color: context.colorTheme.whiteSoap,
borderRadius: BorderRadius.circular(SksMenuConfig.borderRadius),
),
width: double.infinity,
height: 50,
),
);
}
}
54 changes: 54 additions & 0 deletions lib/features/sks-menu/presentation/widgets/sks_menu_view_loading.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import "package:flutter/material.dart";

import "../../../../config/ui_config.dart";
import "../../../../theme/app_theme.dart";
import "../../../../widgets/loading_widgets/shimmer_loading.dart";
import "sks_menu_header.dart";
import "sks_menu_tiles.dart";

class SksMenuViewLoading extends StatelessWidget {
const SksMenuViewLoading({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: context.colorTheme.whiteSoap,
body: Shimmer(
linearGradient: shimmerGradient,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: const [
SksMenuHeaderLoading(),
SksMenuTitleLoadingPaddings(),
],
),
),
);
}
}

class SksMenuTitleLoadingPaddings extends StatelessWidget {
BombardierBulge marked this conversation as resolved.
Show resolved Hide resolved
const SksMenuTitleLoadingPaddings({
super.key,
});

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(SksMenuConfig.paddingLarge),
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, _) {
return const SksMenuTilesLoading();
},
separatorBuilder: (context, _) => const SizedBox(
height: 8,
),
itemCount: 3,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should made some kind of calculations to ensure that large screens are not in 80% blank.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should i use MediaQuery.of(context).size.height or SksMenuConfig padding value in ui_config ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Height here is ok. itemCount is what we re discussing. Please check ScrollableLoaderBuilder to determine how many items need to be displayed

),
);
}
}