Replace static loader PNG with inline SVG matching in-app Spinner

amcclain · amcclain · commit f9f9b4772e78 · 2026-04-29T08:06:43.000-07:00
Replaces the animated `spinner.png` on the pre-app loading screen with an inline SVG arc that visually matches Hoist React's in-app `Spinner` component (FA `spinner-third` with a 2s linear CSS rotation), eliminating the style discontinuity at the JS-bundle handoff.

Adds a new `preloadSpinnerColor` env config controlling the SVG stroke color, defaulting to a neutral `#888`. Pairs with the existing `preloadBackgroundColor`.

The legacy `hoist-react/public/spinner.png` is unchanged and remains available for apps still pinned to older `@xh/hoist-dev-utils` versions.

Generated with Claude Opus 4.7 (1M context)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## v12.1.0 - 2026-04-29
+
+### 🎁 New Features
+
+* Replaced the animated PNG on the static loader page with an inline SVG that visually matches
+  Hoist React's in-app `Spinner` component (FA `spinner-third` with a CSS rotation). Eliminates a
+  style discontinuity at the JS-bundle handoff.
+* New `preloadSpinnerColor` config controls the stroke color of the loader spinner. Defaults to
+  `#888`. Pairs with the existing `preloadBackgroundColor`.
+
 ## v12.0.1 - 2026-04-18
 
 ### 📚 Libraries
diff --git a/configureWebpack.js b/configureWebpack.js
@@ -77,6 +77,7 @@ try {
  *      adding a mobile app to a device home screen, as well as "installing" an app via Chrome's "create shortcut"
  *      option. See https://developer.mozilla.org/en-US/docs/Web/Manifest for options.
  * @param {string} [env.preloadBackgroundColor] - background color to use for the preloader spinner. Defaults to white.
+ * @param {string} [env.preloadSpinnerColor] - stroke color for the preloader spinner SVG. Defaults to a neutral gray (#888).
  * @param {string[]} [env.targetBrowsers] - array of browserslist queries specifying target browsers for Babel and CSS
  *      transpiling and processing.
  * @param {Object} [env.babelPresetEnvOptions] - options to spread onto / override defaults passed here to the Babel
@@ -136,6 +137,7 @@ async function configureWebpack(env) {
         favicon = env.favicon || null,
         manifestConfig = env.manifestConfig || {},
         preloadBackgroundColor = env.preloadBackgroundColor || 'white',
+        preloadSpinnerColor = env.preloadSpinnerColor || '#888',
         stats = env.stats || 'errors-only',
         infrastructureLoggingLevel = env.infrastructureLoggingLevel || 'error',
         targetBrowsers = env.targetBrowsers || [
@@ -657,7 +659,8 @@ async function configureWebpack(env) {
                             styleTags,
                             scriptTags,
                             clientAppName,
-                            preloadBackgroundColor
+                            preloadBackgroundColor,
+                            preloadSpinnerColor
                         };
                     },
                     // No need to minify the HTML itself
diff --git a/static/index.html b/static/index.html
@@ -9,6 +9,15 @@
     <% } %>
     <title><%= htmlWebpackPlugin.options.title %></title>
     <%= styleTags %>
+    <style>
+        @keyframes xh-preload-spin { to { transform: rotate(360deg); } }
+        #xh-preload-spinner svg {
+            width: 50px;
+            height: 50px;
+            animation: xh-preload-spin 2s linear infinite;
+            transform-origin: center;
+        }
+    </style>
 </head>
 <body class="xh-app" style="margin: 0">
 
@@ -17,7 +26,9 @@
 </noscript>
 
 <div id="xh-preload-spinner" style="height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background-color: <%= preloadBackgroundColor %>">
-    <img src="<%= webpackConfig.output.publicPath %>public/spinner.png" style="width: 50px; height: 50px;">
+    <svg viewBox="0 0 24 24" fill="none" stroke="<%= preloadSpinnerColor %>" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" stroke-dasharray="42 56"/>
+    </svg>
 </div>
 
 <div id="xh-root"></div>
