app: Use DeferredBuilderWidget while loading GlobalStore

Moves the actual loading of GlobalStore from GlobalStoreWidget
to _ZulipAppState.initState.

This will allow to do some other tasks concurrently while
the GlobalStore is loading and showing the placeholder while
they complete.

Author: rajveermalviya

lib/widgets/app.dart

@@ -7,6 +7,7 @@ import 'package:flutter/scheduler.dart';
 import '../generated/l10n/zulip_localizations.dart';
 import '../log.dart';
 import '../model/actions.dart';
+import '../model/binding.dart';
 import '../model/localizations.dart';
 import '../model/store.dart';
 import '../notifications/display.dart';
@@ -151,10 +152,13 @@ class ZulipApp extends StatefulWidget {
 }
 
 class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
+  late final Future<GlobalStore> _globalStoreFuture;
+
   @override
   void initState() {
     super.initState();
     WidgetsBinding.instance.addObserver(this);
+    _globalStoreFuture = ZulipBinding.instance.getGlobalStoreUniquely();
   }
 
   @override
@@ -212,44 +216,101 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
 
   @override
   Widget build(BuildContext context) {
-    return GlobalStoreWidget(
-      child: Builder(builder: (context) {
-        return MaterialApp(
-          onGenerateTitle: (BuildContext context) {
-            return ZulipLocalizations.of(context).zulipAppTitle;
-          },
-          localizationsDelegates: ZulipLocalizations.localizationsDelegates,
-          supportedLocales: ZulipLocalizations.supportedLocales,
-          // The context has to be taken from the [Builder] because
-          // [zulipThemeData] requires access to [GlobalStoreWidget] in the tree.
-          theme: zulipThemeData(context),
-
-          navigatorKey: ZulipApp.navigatorKey,
-          navigatorObservers: [
-            if (widget.navigatorObservers != null)
-              ...widget.navigatorObservers!,
-            _PreventEmptyStack(),
-          ],
-          builder: (BuildContext context, Widget? child) {
-            if (!ZulipApp.ready.value) {
-              SchedulerBinding.instance.addPostFrameCallback(
-                (_) => widget._declareReady());
-            }
-            GlobalLocalizations.zulipLocalizations = ZulipLocalizations.of(context);
-            return child!;
-          },
+    return DeferredBuilderWidget(
+      future: _globalStoreFuture,
+      builder: (context, store) {
+        return GlobalStoreWidget(
+          store: store,
+          child: Builder(builder: (context) {
+            return MaterialApp(
+              onGenerateTitle: (BuildContext context) {
+                return ZulipLocalizations.of(context).zulipAppTitle;
+              },
+              localizationsDelegates: ZulipLocalizations.localizationsDelegates,
+              supportedLocales: ZulipLocalizations.supportedLocales,
+              // The context has to be taken from the [Builder] because
+              // [zulipThemeData] requires access to [GlobalStoreWidget] in the tree.
+              theme: zulipThemeData(context),
+
+              navigatorKey: ZulipApp.navigatorKey,
+              navigatorObservers: [
+                if (widget.navigatorObservers != null)
+                  ...widget.navigatorObservers!,
+                _PreventEmptyStack(),
+              ],
+              builder: (BuildContext context, Widget? child) {
+                if (!ZulipApp.ready.value) {
+                  SchedulerBinding.instance.addPostFrameCallback(
+                    (_) => widget._declareReady());
+                }
+                GlobalLocalizations.zulipLocalizations = ZulipLocalizations.of(context);
+                return child!;
+              },
+
+              // We use onGenerateInitialRoutes for the real work of specifying the
+              // initial nav state.  To do that we need [MaterialApp] to decide to
+              // build a [Navigator]... which means specifying either `home`, `routes`,
+              // `onGenerateRoute`, or `onUnknownRoute`.  Make it `onGenerateRoute`.
+              // It never actually gets called, though: `onGenerateInitialRoutes`
+              // handles startup, and then we always push whole routes with methods
+              // like [Navigator.push], never mere names as with [Navigator.pushNamed].
+              onGenerateRoute: (_) => null,
+
+              onGenerateInitialRoutes: _handleGenerateInitialRoutes);
+          }));
+      });
+  }
+}
+
+/// A widget that defers the builder until the provided [future] completes.
+///
+/// It shows a placeholder widget while it waits for the [future]
+/// to complete.
+class DeferredBuilderWidget<T> extends StatefulWidget {
+  const DeferredBuilderWidget({
+    super.key,
+    required this.future,
+    required this.builder,
+    this.placeholderBuilder = _defaultPlaceHolderBuilder,
+  });
+
+  final Future<T> future;
+
+  /// The widget to build when [future] completes, with it's result
+  /// passed as `result`.
+  final Widget Function(BuildContext context, T result) builder;
+
+  /// The placeholder widget to build while waiting for the [future]
+  /// to complete.
+  ///
+  /// By default, it will build the [LoadingPlaceholder].
+  final Widget Function(BuildContext context) placeholderBuilder;
 
-          // We use onGenerateInitialRoutes for the real work of specifying the
-          // initial nav state.  To do that we need [MaterialApp] to decide to
-          // build a [Navigator]... which means specifying either `home`, `routes`,
-          // `onGenerateRoute`, or `onUnknownRoute`.  Make it `onGenerateRoute`.
-          // It never actually gets called, though: `onGenerateInitialRoutes`
-          // handles startup, and then we always push whole routes with methods
-          // like [Navigator.push], never mere names as with [Navigator.pushNamed].
-          onGenerateRoute: (_) => null,
-
-          onGenerateInitialRoutes: _handleGenerateInitialRoutes);
-      }));
+  static Widget _defaultPlaceHolderBuilder(BuildContext context) {
+    return const LoadingPlaceholder();
+  }
+
+  @override
+  State<DeferredBuilderWidget<T>> createState() => _DeferredBuilderWidgetState<T>();
+}
+
+class _DeferredBuilderWidgetState<T> extends State<DeferredBuilderWidget<T>> {
+  T? _result;
+
+  @override
+  void initState() {
+    super.initState();
+    () async {
+      _result = await widget.future;
+      if (mounted) setState(() {});
+    }();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final result = _result;
+    if (result == null) return widget.placeholderBuilder(context);
+    return widget.builder(context, result);
   }
 }
 

lib/widgets/store.dart

@@ -1,8 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 
-import '../model/binding.dart';
-import '../model/database.dart';
 import '../model/settings.dart';
 import '../model/store.dart';
 import 'page.dart';
@@ -15,15 +13,14 @@ import 'page.dart';
 ///  * [GlobalStoreWidget.of], to get access to the data.
 ///  * [PerAccountStoreWidget], for the user's data associated with a
 ///    particular Zulip account.
-class GlobalStoreWidget extends StatefulWidget {
-  const GlobalStoreWidget({
+class GlobalStoreWidget extends InheritedNotifier<GlobalStore> {
+  GlobalStoreWidget({
     super.key,
-    this.placeholder = const LoadingPlaceholder(),
-    required this.child,
-  });
-
-  final Widget placeholder;
-  final Widget child;
+    required GlobalStore store,
+    required Widget child,
+  }) : super(notifier: store,
+         child: _GlobalSettingsStoreInheritedWidget(
+           store: store.settings, child: child));
 
   /// The app's global data store.
   ///
@@ -48,7 +45,7 @@ class GlobalStoreWidget extends StatefulWidget {
   ///  * [PerAccountStoreWidget.of], for the user's data associated with a
   ///    particular Zulip account.
   static GlobalStore of(BuildContext context) {
-    final widget = context.dependOnInheritedWidgetOfExactType<_GlobalStoreInheritedWidget>();
+    final widget = context.dependOnInheritedWidgetOfExactType<GlobalStoreWidget>();
     assert(widget != null, 'No GlobalStoreWidget ancestor');
     return widget!.store;
   }
@@ -75,43 +72,6 @@ class GlobalStoreWidget extends StatefulWidget {
     return widget!.store;
   }
 
-  @override
-  State<GlobalStoreWidget> createState() => _GlobalStoreWidgetState();
-}
-
-class _GlobalStoreWidgetState extends State<GlobalStoreWidget> {
-  GlobalStore? store;
-
-  @override
-  void initState() {
-    super.initState();
-    (() async {
-      final store = await ZulipBinding.instance.getGlobalStoreUniquely();
-      setState(() {
-        this.store = store;
-      });
-    })();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final store = this.store;
-    if (store == null) return widget.placeholder;
-    return _GlobalStoreInheritedWidget(store: store, child: widget.child);
-  }
-}
-
-// This is separate from [GlobalStoreWidget] only because we need
-// a [StatefulWidget] to get hold of the store, and an [InheritedWidget] to
-// provide it to descendants, and one widget can't be both of those.
-class _GlobalStoreInheritedWidget extends InheritedNotifier<GlobalStore> {
-  _GlobalStoreInheritedWidget({
-    required GlobalStore store,
-    required Widget child,
-  }) : super(notifier: store,
-         child: _GlobalSettingsStoreInheritedWidget(
-           store: store.settings, child: child));
-
   GlobalStore get store => notifier!;
 }
 

test/widgets/content_test.dart

@@ -15,7 +15,6 @@ import 'package:zulip/widgets/content.dart';
 import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
-import 'package:zulip/widgets/store.dart';
 import 'package:zulip/widgets/text.dart';
 
 import '../example_data.dart' as eg;
@@ -1139,9 +1138,9 @@ void main() {
 
       final httpClient = prepareBoringImageHttpClient();
 
-      await tester.pumpWidget(GlobalStoreWidget(
-        child: PerAccountStoreWidget(accountId: eg.selfAccount.id,
-          child: RealmContentNetworkImage(src))));
+      await tester.pumpWidget(TestZulipApp(
+        accountId: eg.selfAccount.id,
+        child: RealmContentNetworkImage(src)));
       await tester.pump();
       await tester.pump();
 
@@ -1181,9 +1180,9 @@ void main() {
       await store.addUser(user);
 
       prepareBoringImageHttpClient();
-      await tester.pumpWidget(GlobalStoreWidget(
-        child: PerAccountStoreWidget(accountId: eg.selfAccount.id,
-          child: AvatarImage(userId: user.userId, size: size ?? 30))));
+      await tester.pumpWidget(TestZulipApp(
+        accountId: eg.selfAccount.id,
+        child: AvatarImage(userId: user.userId, size: size ?? 30)));
       await tester.pump();
       await tester.pump();
       tester.widget(find.byType(AvatarImage));