Using Hive with Riverpod, not sure what to load during loading phase - flutter

Question

I am trying to learn how to use Hive for local storage and Riverpod for state managment in my flutter app.
final _localStorageProvider = FutureProvider<Box>(
(ref) async {
final appDocumentDir = await path_provider.getApplicationDocumentsDirectory();
Hive
..init(appDocumentDir.path)
..registerAdapter(QuizOptionModelAdapter());
return Hive.openBox(keys.localStorageBoxKey);
}
);
final _localDataSourceProvider = Provider<QuestionLocalDataSourceImpl>(
(ref) => QuestionLocalDataSourceImpl(
uploadQuestionBox: ref.watch(_localStorageProvider).maybeWhen(
data:(d) => d,
error:(e, trace) {
print("***************************");
print(e);
print(trace);
print("***************************");
throw Exception("FAILED");
},
orElse: () => throw Exception("OR ELSE")
),
),
);
My problem is, I am not sure what other return value I can use during error & orElse phase other than exceptions. Since I am using exception, very briefly before the actual page loads, I get an ugly error page as shown in the screenshot, which disappers in 1 second after the actual elements are rendered.
Any help to avoid throwing errors during error & orElse phase would be really helpful.
So far have tried these solutions without any luck
final _localDataSourceProvider = Provider<QuestionLocalDataSourceImpl>(
(ref) => QuestionLocalDataSourceImpl(
uploadQuestionBox: ref.watch(_localStorageProvider).maybeWhen(
data:(d) => d,
orElse: () => AsyncValue.loading() as Box
),
),
);

Answer 1

I think the issue is that you try to deal with error and orElse within the Provider. A more common way to do this is to watch the FutureProvider within a Widget's build method, and to render a proper data Widget if the data from the FutureProvider is available, and another Widget if the data is not yet available (loading) or if there is an error. That way, all three cases of the Provider's when method return the same type: a Widget.
From the Riverpod docs, see this example:
final configurationsProvider = FutureProvider<Configuration>((ref) async {
final uri = Uri.parse('configs.json');
final rawJson = await File.fromUri(uri).readAsString();
return Configuration.fromJson(json.decode(rawJson));
});
class Example extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
final configs = ref.watch(configurationsProvider);
// Use Riverpod's built-in support
// for error/loading states using "when":
return configs.when(
loading: () => const CircularProgressIndicator(),
error: (err, stack) => Text('Error $err'),
data: (configs) => Text('data: ${configs.host}'),
);
}
}
In your case, if you want to retain the _localDataSourceProvider then my suggestion would be to make that also a FutureProvider that 'wraps' the _localStorageProvider, and to watch the _localDataSourceProvider within the build method of the Widget where you render the data. There, you can use the .when(...) clauses for loading (for example to show a CircularProgressIndicator until the data is loaded), data to render the data, and if necessary error to capture any errors that Hive may generate through the FutureProvider.