combining AsyncNotifier state and prevent unwanted AsyncLoading

[solaristhesun]

What is the correct way to combine state of AsyncNotifier states? The problem with my code is that after calling addValue() the FilteredNotifier state changes to AsyncLoading() before it shows the filtered list. Can this be prevented?

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_test/flutter_test.dart';

final listProvider = AsyncNotifierProvider<ListNotifier, List<int>>(ListNotifier.new);

class ListNotifier extends AsyncNotifier<List<int>> {
  @override
  FutureOr<List<int>> build() async {
    await Future.delayed(const Duration(seconds: 1));

    return [1, 2, 3];
  }

  void addValue(int number) {
    debugPrint("addValue");
    state = AsyncValue.data([...state.value!, number]);
  }
}

final filteredListProvider = AsyncNotifierProvider<FilterListNotifier, List<int>>(FilterListNotifier.new);

class FilterListNotifier extends AsyncNotifier<List<int>> {
  @override
  FutureOr<List<int>> build() async {
    final valuesFuture = ref.watch(listProvider.future);

    return valuesFuture.then((list) => list.where((element) => element % 2 == 0).toList());
  }
}

void main() {
  final container = ProviderContainer();

  container.listen(listProvider, (previous, next) {
    debugPrint("listProvider: $previous -> $next");
  });

  container.listen(filteredListProvider, (previous, next) {
    debugPrint("filteredListProvider: $previous -> $next");
  });

  test('test', () async {
    await Future.delayed(const Duration(seconds: 2));
    container.read(listProvider.notifier).addValue(4);

    await Future.delayed(const Duration(seconds: 5));
  });
}

The output is:

listProvider: AsyncLoading<List<int>>() -> AsyncData<List<int>>(value: [1, 2, 3])
filteredListProvider: AsyncLoading<List<int>>() -> AsyncData<List<int>>(value: [2])
addValue
listProvider: AsyncData<List<int>>(value: [1, 2, 3]) -> AsyncData<List<int>>(value: [1, 2, 3, 4])
filteredListProvider: AsyncData<List<int>>(value: [2]) -> AsyncLoading<List<int>>(value: [2]) // <- this async loading is bothering me
filteredListProvider: AsyncLoading<List<int>>(value: [2]) -> AsyncData<List<int>>(value: [2, 4])

[AhmedLSayed9]

This behavior will be fixed by #2797

Currently, you can just skip when state is reLoading and value is not null.

  container.listen(filteredListProvider, (previous, next) {
    if(next.isReloading && next.hasValue) return;
    debugPrint("filteredListProvider: $previous -> $next");
  });

[rrousselGit]

No #2797 does nothing about it.
It only enables doing a workaround to not do that. The issue is Dart

[rrousselGit]

You're free to set state immediately as the build starts to remove the loading state

Since you have access to the previous value/error, that should be doable.

build() async {
  // Remove loading state from refreshes/reloads
  if (state.hasError) state = AsyncError(state.error!, state.stackTrace!);
  else if (state.hasData) state = AsyncData(state.requireValue);

  await whatever();
}

[solaristhesun]

Ok, I see. Thank you both for your answers.