docs: Default Splash / Loading screen for web app in index.html #177084

Gustl22 · 2025-10-16T07:29:43Z

Contributes to #102178

First I wanted to cherry-pick flutter/gallery#630. But then I noticed that there already exists a documentation: https://docs.flutter.dev/platform-integration/web/initialization.
As most users won't expect this to be customizable (as myself), I wrote a little docs in the index.html.tmpl that link to this page.
https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator

I still think a default splash screen should be in place, e.g. by providing the flutter_bootstrap.js by default (?)

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Gustl22 · 2025-10-16T07:30:13Z

I should we load it dynamically from a separate file so one can easily delete / replace it (?)

This reverts commit 144394c.

…_bootstrap.js

Gustl22 · 2025-10-16T19:37:23Z

Proposal for default flutter_bootstrap.js:

{{flutter_js}}
{{flutter_build_config}}

// Set the theme from the URL param, with fallback to user preference if no theme is
// specified.
const queryParams = new URLSearchParams(window.location.search);

let theme = queryParams.get("brightness");
theme ||= window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.body.classList.add(theme);

const splashScreenStyle = document.createElement('style');
splashScreenStyle.textContent = `
  /* Background */
  body.light {
    background-color: #E6EBEB;
  }

  body.dark {
    background-color: #121212;
  }

  /* Loading indicator */
  body {
    inset: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
  }

  #loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  #loading img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
  }

  #loading.main_done img {
    opacity: 1;
  }

  #loading.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
  }

  @keyframes breathe {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
  }

  @keyframes zooooom {
    from { transform: scale(1); }
    to { transform: scale(0.01); }
  }
`;
document.head.appendChild(splashScreenStyle);

const loading = document.createElement('div');
loading.id = 'loading';

const indicator = document.createElement('img');
indicator.alt = 'Loading indicator...';
indicator.src = 'icons/Icon-192.png';
indicator.height = 100;

loading.appendChild(indicator);
document.body.appendChild(loading);

// See example for progress indicator:
// https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator
_flutter.loader.load({
  onEntrypointLoaded: async function (engineInitializer) {
    loading.classList.add('main_done');
    const appRunner = await engineInitializer.initializeEngine();
    loading.classList.add('init_done');

    await appRunner.runApp();

    // Wait a few milliseconds so users can see the "zoooom" animation
    // before getting rid of the "loading" div.
    window.setTimeout(function () {
      loading.remove();
    }, 200);
  }
});

auto-submit · 2025-10-29T17:20:25Z

autosubmit label was removed for flutter/flutter/177084, because The base commit of the PR is older than 7 days and can not be merged. Please merge the latest changes from the main into this branch and resubmit the PR.

auto-submit · 2025-10-29T20:59:29Z

autosubmit label was removed for flutter/flutter/177084, because - The status or check suite Mac web_tool_tests has failed. Please fix the issues identified (or deflake) before re-applying this label.

…ml (flutter/flutter#177084)

…html (flutter/flutter#177084)

…ml (flutter/flutter#177084)

Roll Flutter from 027f2e4 to e5d5c01 (73 revisions) flutter/flutter@027f2e4...e5d5c01 2025-11-04 mdebbar@google.com [web] Upgrade Chrome to 141 (for engine tests) (flutter/flutter#177743) 2025-11-04 116356835+AbdeMohlbi@users.noreply.github.com Replace deprecated withOpacity in `chip_animation_style.0.dart‎` example (flutter/flutter#177834) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 03612114a36d to c89b6118266b (1 revision) (flutter/flutter#177991) 2025-11-04 mdebbar@google.com [web] Delete unused futurize util (flutter/flutter#177861) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 1a179581af75 to 03612114a36d (1 revision) (flutter/flutter#177984) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 150f844e83fb to 1a179581af75 (3 revisions) (flutter/flutter#177979) 2025-11-04 engine-flutter-autoroll@skia.org Roll Dart SDK from 6f1bd8d05b1d to 156bf665dba4 (2 revisions) (flutter/flutter#177976) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 3990fc40acdf to 150f844e83fb (1 revision) (flutter/flutter#177964) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 85adfd3b8e75 to 3990fc40acdf (1 revision) (flutter/flutter#177962) 2025-11-04 34871572+gmackall@users.noreply.github.com Fix `isHeif` crash (flutter/flutter#177944) 2025-11-04 engine-flutter-autoroll@skia.org Roll Dart SDK from ac065fcd782e to 6f1bd8d05b1d (1 revision) (flutter/flutter#177955) 2025-11-04 engine-flutter-autoroll@skia.org Roll Skia from 001516d132f0 to 85adfd3b8e75 (4 revisions) (flutter/flutter#177958) 2025-11-04 bkonyi@google.com [ Widget Preview ] Add analytic event that's reported when the previewer is opened (flutter/flutter#177949) 2025-11-04 fluttergithubbot@gmail.com Marks Linux_pixel_7pro dynamic_path_stroke_tessellation_perf__timeline_summary to be unflaky (flutter/flutter#171144) 2025-11-03 engine-flutter-autoroll@skia.org Roll Skia from da9b8fb01101 to 001516d132f0 (6 revisions) (flutter/flutter#177951) 2025-11-03 97480502+b-luk@users.noreply.github.com Add FAQ entry about our attempts to remove Skia image codecs. (flutter/flutter#177947) 2025-11-03 jhy03261997@gmail.com Add blockAccessibilityFocus flag (flutter/flutter#175551) 2025-11-03 ahmedsameha1@gmail.com Make sure that a SnackBarAction doesn't crash in 0x0 environment (flutter/flutter#177899) 2025-11-03 ahmedsameha1@gmail.com Make sure that a SelectionArea doesn't crash in 0x0 environment (flutter/flutter#177876) 2025-11-03 34871572+gmackall@users.noreply.github.com Speculative fix for android_verified_input_test (flutter/flutter#177937) 2025-11-03 kjlubick@users.noreply.github.com [skia] Explicitly disable XPS backend (flutter/flutter#177050) 2025-11-03 engine-flutter-autoroll@skia.org Roll Dart SDK from 2d3aa1d5cb9f to ac065fcd782e (2 revisions) (flutter/flutter#177927) 2025-11-03 737941+loic-sharma@users.noreply.github.com Improve Impeller's docs in the top-level docs folder (flutter/flutter#177848) 2025-11-03 ahmedsameha1@gmail.com Make sure that GridTile doesn't crash in 0x0 environment (flutter/flutter#175321) 2025-11-03 ahmedsameha1@gmail.com Make sure that a Slider doesn't crash in 0x0 environment (flutter/flutter#177882) 2025-11-03 planetmarshall@users.noreply.github.com fix(impeller): fix params to glDiscardFrameBufferEXT (flutter/flutter#175589) 2025-11-03 engine-flutter-autoroll@skia.org Roll Skia from 56a10bf56ee0 to da9b8fb01101 (5 revisions) (flutter/flutter#177928) 2025-11-03 47866232+chunhtai@users.noreply.github.com wires up set application locale to web engine (flutter/flutter#177284) 2025-11-03 jesswon@google.com [Android 16] Update `linux_android_emu_unstable` to use avd rev 7 (flutter/flutter#177854) 2025-11-03 ahmedsameha1@gmail.com Make sure that a CheckedPopupMenuItem doesn't crash in 0x0 environment (flutter/flutter#177545) 2025-11-03 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from Ynp3qiXocK8WLTjlb... to vxK5obzfr1X9P2kSh... (flutter/flutter#177917) 2025-11-03 130006795+Spivak-adam@users.noreply.github.com Update pubspec.yaml.tmpl build version tracker on line 5 (flutter/flutter#173600) 2025-11-03 jason-simmons@users.noreply.github.com [Impeller] Fix the source rectangle used when rendering an AtlasContents with the strict mode for nine-patch images (flutter/flutter#177860) 2025-11-03 git@reb0.org docs: Default Splash / Loading screen for web app in index.html (flutter/flutter#177084) 2025-11-03 engine-flutter-autoroll@skia.org Roll Skia from 25e1e4e96980 to 56a10bf56ee0 (6 revisions) (flutter/flutter#177910) 2025-11-03 ahmedsameha1@gmail.com Make sure that a PopupMenuItem doesn't crash in 0x0 environment (flutter/flutter#177533) 2025-11-03 ahmedsameha1@gmail.com Make sure that a RefreshProgressIndicator doesn't crash in 0x0 enviro… (flutter/flutter#177556) 2025-11-03 ahmedsameha1@gmail.com Make sure that a PopupMenuButton doesn't crash in 0x0 environment (flutter/flutter#177493) 2025-11-03 ahmedsameha1@gmail.com Make sure that a CircularProgressIndicator doesn't crash in 0x0 envir… (flutter/flutter#177555) 2025-11-02 ahmedsameha1@gmail.com Make sure that a Radio doesn't crash in 0x0 environment (flutter/flutter#177580) 2025-11-02 ahmedsameha1@gmail.com Make sure that a RadioListTile doesn't crash in 0x0 environment (flutter/flutter#177576) 2025-11-02 ahmedsameha1@gmail.com Make sure that an ExpandIcon doesn't crash in 0x0 envrionment (flutter/flutter#175042) 2025-11-02 ahmedsameha1@gmail.com Make sure that a RangeSlider doesn't crash in 0x0 environment (flutter/flutter#177642) 2025-11-02 ahmedsameha1@gmail.com Make sure that a GridTileBar doesn't crash in 0x0 environment (flutter/flutter#177546) 2025-11-02 ahmedsameha1@gmail.com Make sure that a LinearProgressIndicator doesn't crash in 0x0 environ… (flutter/flutter#177553) 2025-11-02 ahmedsameha1@gmail.com Make sure that a PopupMenuDivider doesn't crash in 0x0 environment (flutter/flutter#177445) ...

…ter#177084) Contributes to flutter#102178 First I wanted to cherry-pick flutter/gallery#630. But then I noticed that there already exists a documentation: https://docs.flutter.dev/platform-integration/web/initialization. As most users won't expect this to be customizable (as myself), I wrote a little docs in the index.html.tmpl that link to this page. https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator I still think a default splash screen should be in place, e.g. by providing the `flutter_bootstrap.js` by default (?) ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

feat: Default Splash / Loading screen for web app

144394c

github-actions bot added the tool Affects the "flutter" command-line tool. See also t: labels. label Oct 16, 2025

Gustl22 added 2 commits October 16, 2025 21:16

Revert "feat: Default Splash / Loading screen for web app"

b789a1a

This reverts commit 144394c.

docs: Provide docs in index.html template on how to customize flutter…

b058b35

…_bootstrap.js

Gustl22 changed the title ~~feat: Default Splash / Loading screen for web app~~ docs: Default Splash / Loading screen for web app in index.html Oct 16, 2025

Gustl22 marked this pull request as ready for review October 16, 2025 19:40

bkonyi requested review from bkonyi and mdebbar October 29, 2025 17:09

bkonyi approved these changes Oct 29, 2025

View reviewed changes

mdebbar approved these changes Oct 29, 2025

View reviewed changes

mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 29, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Oct 29, 2025

Merge branch 'master' into 102178-web-splash-screen

c50ea39

bkonyi added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 29, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Oct 29, 2025

Merge branch 'master' into 102178-web-splash-screen

d80fdde

bkonyi added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 3, 2025

auto-submit bot added this pull request to the merge queue Nov 3, 2025

Merged via the queue into flutter:master with commit bf49578 Nov 3, 2025
150 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Nov 3, 2025

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to bf4957815e10 (66 revisions) flutter/packages#10351

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

ffb10d7

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 633d6591a1f0 (67 revisions) flutter/packages#10353

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

cc8de45

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to b87e863b80ad (68 revisions) flutter/packages#10354

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

ccb2476

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 82ff983ee5a9 (69 revisions) flutter/packages#10355

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

d0cb87b

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 8e567b884d95 (70 revisions) flutter/packages#10356

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

bf4957815 docs: Default Splash / Loading screen for web app in index.…

953ff5e

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 4, 2025

Roll Flutter from 027f2e410241 to afbfaf93566f (69 revisions) flutter/packages#10359

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

bf4957815 docs: Default Splash / Loading screen for web app in index.…

31dc082

…html (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 4, 2025

Roll Flutter from 027f2e410241 to 0f9853333f2f (70 revisions) flutter/packages#10360

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

cc92bf2

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 4, 2025

Roll Flutter from 027f2e410241 to a913d39131af (72 revisions) flutter/packages#10361

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

04be0d2

…ml (flutter/flutter#177084)

engine-flutter-autoroll mentioned this pull request Nov 4, 2025

Roll Flutter from 027f2e410241 to e5d5c01850f2 (73 revisions) flutter/packages#10362

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

bf49578 docs: Default Splash / Loading screen for web app in index.ht…

2027128

…ml (flutter/flutter#177084)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: Default Splash / Loading screen for web app in index.html #177084

docs: Default Splash / Loading screen for web app in index.html #177084

Uh oh!

Gustl22 commented Oct 16, 2025 •

edited

Loading

Uh oh!

Gustl22 commented Oct 16, 2025 •

edited

Loading

Uh oh!

Gustl22 commented Oct 16, 2025 •

edited

Loading

Uh oh!

auto-submit bot commented Oct 29, 2025

Uh oh!

auto-submit bot commented Oct 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

docs: Default Splash / Loading screen for web app in index.html #177084

docs: Default Splash / Loading screen for web app in index.html #177084

Uh oh!

Conversation

Gustl22 commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

Gustl22 commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gustl22 commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

auto-submit bot commented Oct 29, 2025

Uh oh!

auto-submit bot commented Oct 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Gustl22 commented Oct 16, 2025 •

edited

Loading

Gustl22 commented Oct 16, 2025 •

edited

Loading

Gustl22 commented Oct 16, 2025 •

edited

Loading