AdminX global loading Orb (#18076)

refs. https://github.com/TryGhost/Product/issues/3349

- we showed a "Loading..." text for people on super slow connection
instead of the animated Ghost Orb

apps/admin-x-settings/src/admin-x-ds/global/LoadingIndicator.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 export const LoadingIndicator: React.FC = () => {
     return (
         <div>
-            Loading...
+            <div className="relative mx-0 my-[-0.5] box-border inline-block h-[50px] w-[50px] animate-spin rounded-full border border-[rgba(0,0,0,0.1)] before:z-10 before:mt-[7px] before:block before:h-[7px] before:w-[7px] before:rounded-full before:bg-[#4C5156] before:content-['']"></div>
         </div>
     );
 };

apps/admin-x-settings/src/components/providers/GlobalDataProvider.tsx

@@ -1,3 +1,4 @@
+import SpinningOrb from '../../assets/videos/logo-loader.mp4';
 import {Config, useBrowseConfig} from '../../api/config';
 import {ReactNode, createContext, useContext} from 'react';
 import {Setting, useBrowseSettings} from '../../api/settings';
@@ -34,8 +35,20 @@ const GlobalDataProvider = ({children}: { children: ReactNode }) => {
 
     if (requests.some(request => request.isLoading)) {
         return (
-            <div className="flex h-full flex-col items-center justify-center">
-                <div className="text-center text-2xl font-bold">Loading...</div>
+            <div className='gh-loading-orb-container' style={{
+                width: '100vw',
+                height: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingBottom: '8vh'
+            }}>
+                <video autoPlay={true} className='gh-loading-orb' height="100" preload="metadata" style={{
+                    width: '100px',
+                    height: '100px'
+                }} width="100" loop muted playsInline>
+                    <source src={SpinningOrb} type="video/mp4" />
+                </video>
             </div>
         );
     }

apps/admin-x-settings/src/styles/index.css

@@ -65,4 +65,12 @@ html, body, #root {
 
 .dark {
     color: #FAFAFB;
+}
+
+.dark .gh-loading-orb-container {
+    background-color: #000000;
+}
+
+.dark .gh-loading-orb {
+    filter: invert(100%);
 }

apps/admin-x-settings/tailwind.config.cjs

@@ -171,6 +171,14 @@ module.exports = {
                     '100%': {
                         transform: 'translateY(0px)'
                     }
+                },
+                spin: {
+                    '0%': {
+                        transform: 'rotate(0deg)'
+                    },
+                    '100%': {
+                        transform: 'rotate(360deg)'
+                    }
                 }
             },
             animation: {
@@ -182,7 +190,8 @@ module.exports = {
                 'setting-highlight-fade-out': 'fadeOut 0.2s 1.4s ease forwards',
                 'modal-backdrop-in': 'fadeIn 0.15s ease forwards',
                 'modal-in': 'modalIn 0.25s ease forwards',
-                'modal-in-reverse': 'modalInReverse 0.25s ease forwards'
+                'modal-in-reverse': 'modalInReverse 0.25s ease forwards',
+                spin: 'spin 1s linear infinite'
             },
             spacing: {
                 px: '1px',

ghost/admin/app/components/admin-x/settings.js

@@ -288,10 +288,28 @@ export default class AdminXSettings extends Component {
     };
 
     ReactComponent = () => {
+        const fallback = (
+            <div className="admin-x-settings-container--loading" style={{
+                width: '100vw',
+                height: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingBottom: '8vh'
+            }}>
+                <video width="100" height="100" loop autoplay muted playsinline preload="metadata" style={{
+                    width: '100px',
+                    height: '100px'
+                }}>
+                    <source src="assets/videos/logo-loader.mp4" type="video/mp4" />
+                    <div class="gh-loading-spinner"></div>
+                </video>
+            </div>
+        );
         return (
-            <div className={['admin-x-settings-container-', this.args.className].filter(Boolean).join(' ')}>
+            <div className={['admin-x-settings-container-', (this.feature.nightShift && 'dark'), this.args.className].filter(Boolean).join(' ')}>
                 <ErrorHandler>
-                    <Suspense fallback={<p className="admin-x-settings-container--loading">Loading settings...</p>}>
+                    <Suspense fallback={fallback}>
                         <this.AdminXApp
                             ghostVersion={config.APP.version}
                             officialThemes={officialThemes}