Consider updating web app template to include a splash screen #102178

Activity

1. kevmoo

   added

   toolAffects the "flutter" command-line tool. See also t: labels.Affects the "flutter" command-line tool. See also t: labels.

   platform-webWeb applications specificallyWeb applications specifically

   on Apr 19, 2022
2. kevmoo

   assigned

   ditman

   on Apr 19, 2022
3. ditman

   added

   c: new featureNothing broken; request for a new capabilityNothing broken; request for a new capability

   P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter project

   on Apr 20, 2022
4. ditman commented on Jun 4, 2022

   

   ditman

   on Jun 4, 2022

   Member

   More actions

   @kevmoo do we want to move forward with this one? Any news?
5. kevmoo commented on Jun 4, 2022

   

   kevmoo

   on Jun 4, 2022

   ContributorAuthor

   More actions

   I don't think there's anything blocking it! Go for it!
6. ditman

   added

   documentation

   on Oct 20, 2022
7. ditman

   removed their assignment

   on Oct 20, 2022
8. flutter-triage-bot

   added

   d: api docsIssues with https://api.flutter.dev/Issues with https://api.flutter.dev/

   on Jul 5, 2023
9. Hixie

   removed

   documentation

   on Jul 5, 2023
10. flutter-triage-bot

    added

    multiteam-retriage-candidate

    team-webOwned by Web platform teamOwned by Web platform team

    triaged-webTriaged by Web platform teamTriaged by Web platform team

    on Jul 8, 2023
11. Hixie

    removed

    multiteam-retriage-candidate

    on Mar 6, 2024
12. kevmoo

    changed the title [-]Update web app template with new loading behavior[/-] [+]Consider updating web app template to include a splash screen[/+] on May 24, 2024
13. Gustl22 commented on Oct 16, 2025

    

    Gustl22

    on Oct 16, 2025

    Last edited by Gustl22

    Contributor

    More actions

    Would it be feasable to add a default flutter_bootstrap.js on flutter create, which includes the loading logic?
    I think the majority would like it, and doesn't even know that its possible to inject into the initialization process.
    It also makes Flutter look more responsive.

    {{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);
      }
    });

    @ditman I love your animation.
14. github-merge-queue

    added a commit that references this issue on Nov 3, 2025

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

    ...

    bf49578
15. IvoneDjaja

    added a commit that references this issue on Nov 22, 2025

    docs: Default Splash / Loading screen for web app in index.html (flut…

    ...

    ffdb437
16. reidbaker

    added a commit that references this issue on Dec 10, 2025

    docs: Default Splash / Loading screen for web app in index.html (flut…

    ...

    caac59c