feat: add spinner for exported maps

Ihor Dykhta · Ihor Dykhta · commit 5304312bbb69 · 2026-08-04T05:33:56.000+03:00
Signed-off-by: Ihor Dykhta &lt;ihordykhta@Ihors-MacBook-Pro.local&gt;
diff --git a/src/utils/src/export-map-html.ts b/src/utils/src/export-map-html.ts
@@ -86,7 +86,7 @@ export const exportMapToHTML = (options, version = KEPLER_GL_VERSION) => {
           // native loader (which fails under file://).
           window.esmsInitOptions = {shimMode: true};
         </script>
-        <script src="https://unpkg.com/es-module-shims@${ES_MODULE_SHIMS_VERSION}/dist/es-module-shims.js" crossorigin="anonymous"></script>
+        <script async src="https://unpkg.com/es-module-shims@${ES_MODULE_SHIMS_VERSION}/dist/es-module-shims.js" crossorigin="anonymous"></script>
         
         <script type="importmap-shim">
           {
@@ -155,10 +155,52 @@ export const exportMapToHTML = (options, version = KEPLER_GL_VERSION) => {
             })
             .catch(function(error) {
               console.error('kepler.gl: failed to load UMD bundle', error);
+              var screen = document.getElementById('kepler-load-screen');
+              if (screen) {
+                screen.querySelector('.kepler-spinner').style.display = 'none';
+                screen.querySelector('.kepler-load-label').style.display = 'none';
+                var msg = document.createElement('div');
+                msg.className = 'kepler-load-error';
+                msg.textContent = 'Failed to load the map bundle. Check your internet connection and reload the page.';
+                screen.appendChild(msg);
+              }
             });
         </script>
         <style type="text/css">
           body {margin: 0; padding: 0; overflow: hidden;}
+          #kepler-load-screen {
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: #29323c;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            z-index: 9999;
+            font-family: ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif;
+            color: #a0a7b4;
+          }
+          #kepler-load-screen .kepler-spinner {
+            width: 48px; height: 48px;
+            border: 4px solid rgba(255,255,255,0.08);
+            border-top-color: #1fbad6;
+            border-radius: 50%;
+            animation: kepler-spin 0.8s linear infinite;
+          }
+          #kepler-load-screen .kepler-load-label {
+            font-size: 13px;
+            letter-spacing: 0.5px;
+          }
+          #kepler-load-screen .kepler-load-error {
+            font-size: 13px;
+            color: #f05e45;
+            max-width: 360px;
+            text-align: center;
+            line-height: 1.5;
+          }
+          @keyframes kepler-spin { to { transform: rotate(360deg); } }
         </style>
 
         <!--MapBox token-->
@@ -199,7 +241,10 @@ export const exportMapToHTML = (options, version = KEPLER_GL_VERSION) => {
       <body>
         <!-- We will put our React component inside this div. -->
         <div id="app">
-          <!-- Kepler.gl map will be placed here-->
+          <div id="kepler-load-screen">
+            <div class="kepler-spinner"></div>
+            <div class="kepler-load-label">Loading map…</div>
+          </div>
         </div>
 
         <!--
