perf(startup): paint a splash immediately, run init off the first frame
main() awaited all of configureDependencies() (open the encrypted DB, derive the social key, seed/scan the species catalog) before the first runApp, so nothing painted until init finished — startup jank visible as skipped frames. Now main() runs runApp immediately with a Bootstrap widget that shows a native-splash-matching green splash while the heavy work runs, then swaps in TaneApp. On failure it shows a localized error with a retry (configureDependencies is idempotent, so retry is safe). Adds a bootstrap i18n group (en/es/pt/ast) and a widget test for the splash/error frame.
This commit is contained in:
parent
33d8b2a4d7
commit
71413f3801
12 changed files with 289 additions and 53 deletions
162
apps/app_seeds/lib/bootstrap.dart
Normal file
162
apps/app_seeds/lib/bootstrap.dart
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_localizations/flutter_localizations.dart';
|
||||
|
||||
import 'app.dart';
|
||||
import 'data/species_repository.dart';
|
||||
import 'data/variety_repository.dart';
|
||||
import 'di/injector.dart';
|
||||
import 'i18n/strings.g.dart';
|
||||
import 'services/auto_backup_service.dart';
|
||||
import 'services/coarse_location.dart';
|
||||
import 'services/inbox_service.dart';
|
||||
import 'services/locale_store.dart';
|
||||
import 'services/message_store.dart';
|
||||
import 'services/offer_outbox.dart';
|
||||
import 'services/onboarding_store.dart';
|
||||
import 'services/profile_cache.dart';
|
||||
import 'services/profile_store.dart';
|
||||
import 'services/social_service.dart';
|
||||
import 'services/social_settings.dart';
|
||||
import 'ui/theme.dart';
|
||||
|
||||
/// Boots the app WITHOUT blocking the first frame: paints a splash immediately,
|
||||
/// then wires the encrypted DB + services and swaps in [TaneApp] once ready.
|
||||
///
|
||||
/// Before this, `main` awaited the whole of `configureDependencies()` (open the
|
||||
/// encrypted DB, derive the social key, seed/scan the species catalog…) before
|
||||
/// the first `runApp`, so nothing painted until init finished — the startup jank
|
||||
/// visible as skipped frames. Now `main` runs `runApp` immediately with this
|
||||
/// widget; the heavy work runs while the splash is already on screen.
|
||||
class Bootstrap extends StatefulWidget {
|
||||
const Bootstrap({super.key});
|
||||
|
||||
@override
|
||||
State<Bootstrap> createState() => _BootstrapState();
|
||||
}
|
||||
|
||||
class _BootstrapState extends State<Bootstrap> {
|
||||
late Future<TaneApp> _app = _boot();
|
||||
|
||||
Future<TaneApp> _boot() async {
|
||||
await configureDependencies();
|
||||
|
||||
// The saved language lives in the keystore, so it can only be applied once
|
||||
// DI is up. Until now the splash showed in the device language (it has no
|
||||
// text), so there is no visible flip.
|
||||
final savedLocale = await getIt<LocaleStore>().saved();
|
||||
if (savedLocale != null) LocaleSettings.setLocaleSync(savedLocale);
|
||||
|
||||
final onboarding = getIt<OnboardingStore>();
|
||||
final inbox =
|
||||
getIt.isRegistered<InboxService>() ? getIt<InboxService>() : null;
|
||||
// Listen for incoming private messages app-wide (foreground) so they arrive
|
||||
// and fill the inbox even before their chat is opened.
|
||||
if (inbox != null) unawaited(inbox.start());
|
||||
|
||||
return TaneApp(
|
||||
repository: getIt<VarietyRepository>(),
|
||||
species: getIt<SpeciesRepository>(),
|
||||
onboarding: onboarding,
|
||||
social:
|
||||
getIt.isRegistered<SocialService>() ? getIt<SocialService>() : null,
|
||||
socialSettings: getIt<SocialSettings>(),
|
||||
location: const GeolocatorCoarseLocation(),
|
||||
outbox: getIt<OfferOutbox>(),
|
||||
messageStore: getIt<MessageStore>(),
|
||||
profileStore: getIt<ProfileStore>(),
|
||||
profileCache: getIt<ProfileCache>(),
|
||||
inbox: inbox,
|
||||
showIntro: !await onboarding.introSeen(),
|
||||
autoBackup: getIt.isRegistered<AutoBackupService>()
|
||||
? getIt<AutoBackupService>()
|
||||
: null,
|
||||
);
|
||||
}
|
||||
|
||||
// `configureDependencies` is idempotent (and self-heals a half-wired
|
||||
// container), so retrying after a failed boot is safe.
|
||||
void _retry() => setState(() => _app = _boot());
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FutureBuilder<TaneApp>(
|
||||
future: _app,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.hasData) return snapshot.data!;
|
||||
return BootstrapSplash(
|
||||
error: snapshot.hasError,
|
||||
onRetry: snapshot.hasError ? _retry : null,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The pre-init frame. A minimal [MaterialApp] so its text has a
|
||||
/// `Directionality`, theme and localizations. Its background matches the native
|
||||
/// splash colour ([seedGreen]) for a seamless handoff — one continuous green
|
||||
/// screen from launch until the app is ready. Shows a spinner while booting and,
|
||||
/// on [error], the failure message with a [onRetry] action.
|
||||
class BootstrapSplash extends StatelessWidget {
|
||||
const BootstrapSplash({required this.error, this.onRetry, super.key});
|
||||
|
||||
final bool error;
|
||||
final VoidCallback? onRetry;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: buildTaneTheme(),
|
||||
locale: TranslationProvider.of(context).flutterLocale,
|
||||
supportedLocales: AppLocaleUtils.supportedLocales,
|
||||
localizationsDelegates: const [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
GlobalCupertinoLocalizations.delegate,
|
||||
],
|
||||
home: Scaffold(
|
||||
backgroundColor: seedGreen,
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Image.asset('assets/logo.png', width: 120, height: 120),
|
||||
const SizedBox(height: 32),
|
||||
if (error) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32),
|
||||
child: Text(
|
||||
context.t.bootstrap.failed,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
if (onRetry != null)
|
||||
FilledButton(
|
||||
onPressed: onRetry,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: seedGreen,
|
||||
),
|
||||
child: Text(context.t.bootstrap.retry),
|
||||
),
|
||||
] else
|
||||
const SizedBox(
|
||||
width: 28,
|
||||
height: 28,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
valueColor: AlwaysStoppedAnimation(Colors.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue