Combining async values, streams, futures

[ciprig]

The following code will cause a continuous flicker between loading and value as the future2Provider is disposed of when new values are emitted, and when it is recreated, it will emit a short Loading state.

final depProvider = StreamProvider.autoDispose<int>((ref) async* {
  for (int i = 0; i < 5; i++) {
    await Future.delayed(const Duration(milliseconds: 600));
    yield i;
  }
});

final dep2Provider = StreamProvider.autoDispose<int>((ref) async* {
  for (int i = 0; i < 5; i++) {
    await Future.delayed(const Duration(milliseconds: 1000));
    yield i;
  }
});

final future2Provider = FutureProvider<int>((ref) async {
  //flicker with Loading
  final future1 = ref.watch(depProvider.future);
  final future2 = ref.watch(dep2Provider.future);
  final [x, y] = await Future.wait([future1, future2]);
  return x * y;
});


  Widget build(BuildContext context, WidgetRef ref) {
    final future = ref.watch(future2Provider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Issue Example')),
        body: Center(
          child: future.when(
            data: (value) => Text('Value: $value'),
            loading: () => CircularProgressIndicator(),
            error: (error, stack) => Text('Error: $error'),
          ),
        ),

This will not create any disposal and flicker, however, .stream is deprecated... why?

final rxProvider = StreamProvider.autoDispose<int>((ref) {
  //deprecated
  final stream1 = ref.watch(depProvider.stream);
  final stream2 = ref.watch(dep2Provider.stream);
  return Rx.combineLatest2(stream1, stream2, (x, y) => x * y);
});

Another solution that will cause disposal but no flickering is combining AsyncValues however is ugly especially if there are more than 2 to combine.

final asyncProvider = Provider.autoDispose<AsyncValue<int>>((ref) {
  final async1 = ref.watch(depProvider);
  final async2 = ref.watch(dep2Provider);

  return async1.when(
    data: (x) => async2.when(
      data: (y) => AsyncValue.data(x * y),
      error: (error, stackTrace) => AsyncValue.error(error, stackTrace),
      loading: () => const AsyncValue.loading(),
    ),
    error: (error, stackTrace) => AsyncValue.error(error, stackTrace),
    loading: () => const AsyncValue.loading(),
  );
});

There should be an easy way to combine async in a linear imperative way, like in the first example.

[rrousselGit]

The following code will cause a continuous flicker between loading and value as the future2Provider is disposed of when new values are emitted, and when it is recreated, it will emit a short Loading state.

That's not quite right.

The flicker is only because your UI decided to flicker in that scenario. You have all the information you need not to flicker.

For example, asyncValue.when has skipLoadingOnReload.

[ciprig]

Yes, skipLoadingOnReload fixes the UI, however, the FutureProvider still emits a loading state even when there is no need, as the value is available immediately.

[rrousselGit]

It's not available immediately though. There's an async gap for a short amount of time.

[ciprig]

Is the async gap created by Dart, or because of how Riverpod works? Anyway, it seems that the old value is cached.

I would expect all 3 cases to have the same final behavior and the same state emissions for FutureProvider and Provider of AsyncValue, so that combining streams and futures is intuitive and easy in Rivepod.

[ ] didUpdateProvider: FutureProvider#96ead AsyncLoading() -> AsyncData(value: 1)
[ +205 ms] didUpdateProvider: AutoDisposeStreamProvider#9d310 AsyncData(value: 1) -> AsyncData(value: 2)
[ ] didDisposeProvider: FutureProvider#96ead
[ +2 ms] didUpdateProvider: FutureProvider#96ead AsyncData(value: 1) -> AsyncLoading(value: 1)
[ +18 ms] didUpdateProvider: FutureProvider#96ead AsyncLoading(value: 1) -> AsyncData(value: 2)
[ +586 ms] didUpdateProvider: AutoDisposeStreamProvider#9d310 AsyncData(value: 2) -> AsyncData(value: 3)
[ ] didDisposeProvider: FutureProvider#96ead

[ciprig]

Also, I'm curious why .stream is deprecated.