Repository: flutter
Issue: `Localizations.override()` displays empty container while localizations are loading
Labels: framework,a: internationalization,f: routes,has reproducible steps,P2,found in release: 3.3,found in release: 3.6,team-framework,triaged-framework

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Use `Localizations.override()` to override the localizations for a portion of an app (for example, a single route)
2. Use common localizations patterns that involve loading content asynchronously, such as those called out in https://docs.flutter.dev/development/accessibility-and-localization/internationalization
3. Notice that there is an empty container displayed while the localizations load
4. Notice that this empty container being placed in the widget tree breaks hero animations

**Expected results:** <!-- what did you want to see? -->

I would expect there to be some way to customize what is displayed while the localizations load.

**Actual results:** <!-- what did you see? -->

A blank container is displayed

Below is a reproduction. You can view this in DartPad here: https://dartpad.dev/?id=85fa18d957b4bf090f6ca17ec0589faf

<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        initialRoute: '/routeA',
        routes: {
          '/routeA': (BuildContext context) => const RouteA(),
          '/routeB': (BuildContext context) {
            return Localizations.override(
              context: context,
              delegates: const [MockLocalizationsDelegate()],
              child: const RouteB(),
            );
          },
        },
      );
  }
}


class RouteA extends StatelessWidget {
  const RouteA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Route A'),),
      body: Center(
        child: Column(
          children: [
            const Hero(tag: 'my-hero', child: FlutterLogo(size: 50)),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/routeB');
              },
              child: const Text('Go to B'),
            ),
          ],
        ),
      ),
    );
  }
}

class RouteB extends StatelessWidget {
  const RouteB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Route B'),),
      body: Center(
        child: Column(
          children: [
            const Hero(tag: 'my-hero', child: FlutterLogo(size: 100)),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/routeA');
              },
              child: const Text('Go to A'),
            ),
          ],
        ),
      ),
    );
  }
}

class TitleLocalizations {
  const TitleLocalizations(this.title);
  final String title;
}

class MockLocalizationsDelegate
    extends LocalizationsDelegate<TitleLocalizations> {
  const MockLocalizationsDelegate();

  @override
  Future<TitleLocalizations> load(Locale locale) {
    return lookupLocalizations(locale);
  }

  @override
  bool isSupported(Locale locale) =>
      <String>['en'].contains(locale.languageCode);

  @override
  bool shouldReload(MockLocalizationsDelegate old) => false;
}

Future<TitleLocalizations> lookupLocalizations(Locale locale) {
  // Lookup logic when only language code is specified.
  switch (locale.languageCode) {
    case 'en':
      return Future<void>.delayed(const Duration(milliseconds: 250))
          .then((value) => const TitleLocalizations('My title'));
  }

  throw StateError('No localizations found for local $locale');
}
```

</details>

<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->

Here is a video without `Localizations.override()`. The route animation is smooth and the hero animation works as expected. 

https://user-images.githubusercontent.com/20613561/201399555-43827123-b224-4239-84d0-5bbf488e18f2.mov

Here is a video with `Localizations.override()`. Route B displays an empty container for 250ms and the hero animation does not work when going from A -> B.

https://user-images.githubusercontent.com/20613561/201399560-f393b4c2-ff58-413a-a65d-ed603b3ea42a.mov

This issue was brought up in #58502, but closed as expected behavior. I don't believe this is expected behavior. The [documentation](https://api.flutter.dev/flutter/widgets/Localizations/Localizations.override.html) for `Localizations.override()` states the following.

> This factory constructor is used for the (usually rare) situation where part of an app should be localized for a different locale than the one defined for the device, or if its localizations should come from a different list of [LocalizationsDelegate]s than the list defined by [WidgetsApp.localizationsDelegates].

The use case in the reproduction would fall under this. Part of the app is using a different set of localizations than the rest of the app.