Web loading progress indicator

[abdelaziz-mahdy]

Is your feature request related to a problem? Please describe.

when loading flutter web the splash screen without loading doesnt show users progress which can be a bit annoying if internet speed is not fast enough

Describe the solution you'd like
show progress indicator under app logo (or splash logo)

Describe alternatives you've considered
this answer worked for me
https://stackoverflow.com/a/75426713, but it would be nice to have it integrated in the package for easy adding

Additional context

[yvdjee]

Hi @zezo357, do you have example code? I tried the example code but its stuck splash screen

[abdelaziz-mahdy]

Sadly I don't have it right now, I will implement it on this package example and share it here

[abdelaziz-mahdy]

@yvdjee

Steps:

1. Create style file in web/loading/style.css

   .container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       width: 100%;
       margin-top: 100px;  /* Added a margin to shift it down a bit (to avoid logo)*/
   }
   
   .progress-bar__container {
       width: 80%;
       height: 2rem;
       border-radius: 2rem;
       position: relative;
       overflow: hidden;
       transition: all 0.5s;
       will-change: transform;
       box-shadow: 0 0 5px #42a5f5;  /* Update color to something that fits for you*/
   }
   
   .progress-bar {
       position: absolute;
       height: 100%;
       width: 100%;
       content: "";
       background-color: #42a5f5;  /* Update color to something that fits for you*/
       top:0;
       bottom: 0;
       left: -100%;
       border-radius: inherit;
       display: flex;
       justify-content: center;
       align-items:center;
       color: white;
       font-family: sans-serif;
   }
   
   .progress-bar__text {
       display: none;
   }

2. Create JavaScript file in web/loading/update_progress.js

   function updateProgress(num) {
       const progressBar = document.querySelector('.progress-bar');
       const progressBarText = document.querySelector('.progress-bar__text');
   
       gsap.to(progressBar, {
         x: num + "%",
         duration: 2,
         onComplete: () => {
           if(num >= 100){
             const container = document.querySelector('.container');
             container.style.display = 'none';
           }
         }
       });
   
       progressBarText.style.display = 'block';
       // progressBarText.textContent = num + "%";
   }

3. Add these lines before the head section of your HTML

   <link rel="stylesheet" type="text/css" href="loading/style.css">
   <script src="loading/update_progress.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>

4. Add loading indicator in HTML after the splash part

   <div class="container">
     <div class="progress-bar__container">
       <div class="progress-bar">
         <span class="progress-bar__text" id="loading">Loading...</span>
       </div>
     </div>
   </div>

5. Update script part to be

   <script>
     window.addEventListener('load', function (ev) {
       var loading = document.querySelector('#loading');
       loading.textContent = "Running app...";
       updateProgress(15);
       _flutter.loader.loadEntrypoint({
         serviceWorker: {
           serviceWorkerVersion: serviceWorkerVersion,
         },
         onEntrypointLoaded: async function (engineInitializer) {
           loading.textContent = "Running app...";
           updateProgress(50);
           let appRunner = await engineInitializer.initializeEngine();
           updateProgress(80);
           loading.textContent = "Running app...";
           await appRunner.runApp();
           updateProgress(100);
         }
       });
     });
   </script>

For the full example, check https://github.com/zezo357/path_finding.

For looks check deployed example https://zezo357.github.io/path_finding/

[abdelaziz-mahdy]

Instructions for Updating Code in Version 2.3.6

1. Update web/loading/style.css for the .container Class:

   Locate the .container class in your web/loading/style.css file and update it as follows:

   Before:

   .container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       width: 100%;
       margin-top: 100px;  /* Added a margin to shift it down a bit (to avoid logo)*/
   }

   After:

   .container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       width: 100%;
       margin-top: 100px;  /* Added a margin to shift it down a bit */
       z-index: 999998; /* Higher than the splash screen */
       position: relative; /* Required for z-index to take effect */
   }

2. Replace web/loading/update_progress.js:

   Replace the existing content in web/loading/update_progress.js with the following code:

   function updateProgress(num) {
       if (num == 100) {
           const container = document.querySelector('.container');
           container.style.display = 'none';
       }
       const progressBar = document.querySelector('.progress-bar');
       const progressBarText = document.querySelector('.progress-bar__text');
   
       gsap.to(progressBar, {
           x: num + "%",
           duration: 2,
       });
   
       progressBarText.style.display = 'block';
       // progressBarText.textContent = num + "%";
   }