I have a UI in my app that shows a list of notifications! I added pull to refresh which gets the list of notifications again from the api.
I use Async value to display the list of notifications and also a loading state when it is loading.
What i want to do now is, show the list of notifications, and when the user triggers the refresh, i still want to show the list, as well as show the loading state
The LinearProgressIndicator()
at the top shows when its loading, but the list below disappears when its loading and reappears
I have an api call thats fetches a list of notifications
class NotificationsRepo {
final HttpApi httpApi;
NotificationsRepo({required this.httpApi});
Future<List<Notify>> getAll() async {
// Get from api and return values
} on MyException catch (_) {
rethrow;
}
}
}
final notificationsRepoPod = Provider<NotificationsRepo>((ref) {
return NotificationsRepo(httpApi: ref.watch(httpProvider));
});
I have the provider like this
final notificationsPod = FutureProvider.autoDispose<List<Notify>>((ref) {
return ref.read(notificationsRepoPod).getAll();
});
In the UI this is what i did.
return Scaffold(
appBar: AppBar(),
body: RefreshIndicator(
onRefresh: () => context.refresh(notificationsPod),
child: Column(
children: [
watch(notificationsPod).maybeWhen(
loading: () => const LinearProgressIndicator(),
orElse: () => const SizedBox(),
),
watch(notificationsPod).maybeWhen(
data: (notifs) => Expanded(
child: ListView.separated(
itemBuilder: (_, i) => NotificationItem(notify: notifs[i]),
separatorBuilder: (_, __) => const Divider(height: 0),
itemCount: notifs.length,
),
),
orElse: () => const SizedBox(),
),
],
),
),
);
How can i make the list show if there is some data, as well as the loading show during the loading state?
With the current code above, this is what happens
When it is loading:
When it has data
Please whats the best Riverpod way to solve this issue? to show the list if it has gotten data before, and to show the loading whenever its loading