How to show immediately your logo or spinner on the web before the flutter splash shows up

It takes a few seconds opening a flutterflow app on the web (or as a webapp) until the splash screen shows. It loads the flutter system using javascript and it usually takes few seconds. During this time, the screen stays blank

To overcome it, one might add a small script in Settings -> Web Deployment -> Custom Headers

Replace YOUR_IMAGE_URL with your png or gif

In the example we rotate the logo as a spinner every 1.5 seconds. Use a small size image.

Your image will show almost immediately when the app loads and will be replaced by the splash screen when it's ready.

Happy coding 😃

<style>
<!-- initial loading screen -->
<style>
#flutter-loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#project-img-spinner {
  animation: spinPause 1.5s linear infinite;
}

@keyframes spinPause {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Create loading screen
    const loadingHTML = `
      <div id="flutter-loading-screen">
	    <img id="project-img-spinner" src="YOUR_IMAGE_URL">
        </div>
      </div>
    `;
    
    document.body.insertAdjacentHTML('afterbegin', loadingHTML);
    
    // Hide when Flutter loads
    window.addEventListener('flutter-first-frame', function() {
      document.body.classList.add('flutter-loaded');
      setTimeout(() => {
        document.getElementById('flutter-loading-screen')?.remove();
      }, 500);
    });
  });
</script>