Show CircularProgressIndicator() on "loading" only after a minimum time

[herna]

Hi,

I have a typical AsyncNotifier and widget to perform some async operations.

When doing these async operations, like updating something in my data base, I emit an "AsyncValue.loading()" in the notifier to show a CircularProgressIndicator() and after that I perform the operation itself inside an "AsyncValue.guard()". In the build() method of my widget I have something like this:

Widget build(BuildContext context) {
  return MyWidget(
        body: myState.when(
            data: (data) => WhenDataWidget(data),
            error: (o, s) => WhenErrorWidget(oError: o),
            loading: () => const Center(child: CircularProgressIndicator()),
      );
}

As per the title of this post, I'd like to only show the CircularProgressIndicator() if the async operation takes a minimum time to avoid that weird flash if the operation only takes some milliseconds.

At the moment I am able to do it by using the timeout() function. I have these functions in my AsyncNotifier:

Future<void> asyncOp(Future<void> Function() fn) async {
    fn().timeout(const Duration(seconds: 1),
        onTimeout: () => state = const AsyncValue.loading());
  }

Future<void> updateData() async {
    state = await AsyncValue.guard(() async {
      // perform some operations and update the state
      return state.value!;
    });
  }

And then in the widget I trigger the async operation like this:

ref
  .read(myProvider().notifier).asyncOp(() => ref
    .read(myProvider().notifier).updateData());

This works but the problem is I don't know how to do it for all my providers without writing the asyncOp() in every of them.

Does Riverpod have some built-in functionality for this that I'm missing? How do you normally handle this?

Thank you.

[herna]

Hi @rrousselGit, could you just quickly let me know about this?

Very appreciated.

[AhmedLSayed9]

You can avoid the loading flash by setting skipLoadingOnReload to true at .when

[herna]

Thanks @AhmedLSayed9 for your reply.

If I set that skipLoadingOnReload to true, then the loading: () => const Center(child: CircularProgressIndicator()), is never shown while executing the async operation, that's not what I want but only showing this CircularProgressIndicator() if the operation takes longer than a particular time.

[herna]

Thank you very much @AhmedLSayed9, this seems to be pretty much what I was looking for!

I’ll give it a try.

[davidmartos96]

@herna Interesting idea. How are you handling the 4th initial empty state with AsyncValue.
Are you using the Data state with null?

[herna]

Hi @davidmartos96, are you talking about this? --> #2579

I have something like the following in every part of my application.

The widget:

final state =
        ref.watch(installationEditControllerProvider(widget.installationId));

return switch (state) {
      AsyncData(:final value, isLoading: false) => whenData(value),
      AsyncError(:final error) => WhenErrorWidget(oError: error),
      _ => const WhenLoadingWidget(),
    };

And the notifier:

@override
  FutureOr<InstallationEditState> build(int installationId) async {
    InstallationEditDTO installationEditDTO =
        await ref.read(installationServiceProvider).edit(installationId);
    return InstallationEditState(
      installationEditDTO: installationEditDTO,
    );
  }

The workflow of my application is: build() retrieves something from a database or an external API and I show the final page according to this data (almost always a form or a list or records)

I am only interested in showing the final page when the provider build() method completes, I don't have the need to make anything special for that initial empty state if that's what you mean. I am even using isLoading: false in AsyncData because sometimes I am invalidating the provider from other point of the application and I don't want the previous data to be shown, I just want the loading state in that case too.

I don't know if I have answered your question.

[davidmartos96]

@herna Thanks! Yes, that answers it.
I was thinking you also didn't want to show the loading indicator with the first state, the initial build.

[herna]

Hi @davidmartos96

Sorry but I'm still learning about Riverpod and didn't understand your question. I do really understand now that I was applying this solution and indeed I am stuck at how to apply this for that initial empty build(). Any ideas? I was trying to figure it out but I don't come up with a good solution.

@AhmedLSayed9, any help with this?

Thanks.