diff --git a/{{cookiecutter.out_dir}}/web/flutter_bootstrap.js b/{{cookiecutter.out_dir}}/web/flutter_bootstrap.js
new file mode 100644
index 0000000..18d94a2
--- /dev/null
+++ b/{{cookiecutter.out_dir}}/web/flutter_bootstrap.js
@@ -0,0 +1,20 @@
+{{flutter_js}}
+{{flutter_build_config}}
+
+var loading = document.querySelector('#loading');
+_flutter.loader.load({
+    serviceWorkerSettings: {
+        serviceWorkerVersion: {{flutter_service_worker_version}},
+    },
+    onEntrypointLoaded: async function (engineInitializer) {
+        loading.classList.add('main_done');
+        const appRunner = await engineInitializer.initializeEngine({useColorEmoji: useColorEmoji});
+
+        loading.classList.add('init_done');
+        await appRunner.runApp();
+
+        window.setTimeout(function () {
+            loading.remove();
+        }, 200);
+    }
+});
\ No newline at end of file
diff --git a/{{cookiecutter.out_dir}}/web/index.html b/{{cookiecutter.out_dir}}/web/index.html
index 9ce87d6..e2e81d7 100644
--- a/{{cookiecutter.out_dir}}/web/index.html
+++ b/{{cookiecutter.out_dir}}/web/index.html
@@ -2,21 +2,7 @@
 <html>
 
 <head>
-  <!--
-    If you are serving your web app in a path other than the root, change the
-    href value below to reflect the base path you are serving from.
-
-    The path provided below has to start and end with a slash "/" in order for
-    it to work correctly.
-
-    For more details:
-    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-
-    This is a placeholder for base href that will be replaced by the value of
-    the `--base-href` argument provided to `flutter build`.
-  -->
   <base href="{{ cookiecutter.base_url }}">
-
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="{{ cookiecutter.project_description }}">
@@ -44,34 +30,10 @@
   </script>
 
   <script src="python.js"></script>
-
-  <script>
-    // The value below is injected by flutter build, do not touch.
-    const serviceWorkerVersion = null;
-  </script>
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
 </head>
 
 <body>
-  <script>
-    window.addEventListener('load', function (ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: function (engineInitializer) {
-          engineInitializer.initializeEngine({
-            renderer: webRenderer,
-            useColorEmoji: useColorEmoji,
-          }).then(function (appRunner) {
-            appRunner.runApp();
-          });
-        }
-      });
-    });
-  </script>
+  <script src="flutter_bootstrap.js" async></script>
 </body>
 
 </html>
\ No newline at end of file
