Add loading indicator

gregberge · gregberge · commit 5fdb85440011 · 2025-03-26T21:48:33.000+01:00
diff --git a/bun.lock b/bun.lock
@@ -74,6 +74,7 @@
         "bun-types": "^1.1.20",
         "classnames": "^2.5.1",
         "framer-motion": "^10.16.14",
+        "holy-loader": "^2.3.13",
         "js-cookie": "^3.0.5",
         "jsontoxml": "^1.0.1",
         "jwt-decode": "^4.0.0",
@@ -1957,6 +1958,8 @@
 
     "highlightjs-vue": ["highlightjs-vue@1.0.0", "", {}, "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="],
 
+    "holy-loader": ["holy-loader@2.3.13", "", { "peerDependencies": { "react": ">= 16.0.0" } }, "sha512-SnQ06sfMgbhiRGkHZ0RFMbexSpZN3i6tgItt3q8GWNba3mOdsq1RNJXkoqsWkqPIAmyroj2/xIOHu1hCFnjkBQ=="],
+
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
     "hookified": ["hookified@1.8.1", "", {}, "sha512-GrO2l93P8xCWBSTBX9l2BxI78VU/MAAYag+pG8curS3aBGy0++ZlxrQ7PdUOUVMbn5BwkGb6+eRrnf43ipnFEA=="],
diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
@@ -39,6 +39,7 @@
         "bun-types": "^1.1.20",
         "classnames": "^2.5.1",
         "framer-motion": "^10.16.14",
+        "holy-loader": "^2.3.13",
         "js-cookie": "^3.0.5",
         "jsontoxml": "^1.0.1",
         "jwt-decode": "^4.0.0",
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -21,14 +21,14 @@ import {
     hexToRgb,
 } from '@gitbook/colors';
 import { IconStyle, IconsProvider } from '@gitbook/icons';
+import HolyLoader from 'holy-loader';
 import * as ReactDOM from 'react-dom';
 
 import { getFontData } from '@/fonts';
 import { fontNotoColorEmoji, ibmPlexMono } from '@/fonts/default';
 import { getSpaceLanguage } from '@/intl/server';
 import { getAssetURL } from '@/lib/assets';
 import { tcls } from '@/lib/tailwind';
-
 import { ClientContexts } from './ClientContexts';
 
 import '@gitbook/icons/style.css';
@@ -151,6 +151,7 @@ export async function CustomizationRootLayout(props: {
                     }
                 `}</style>
             </head>
+            <HolyLoader color="rgb(var(--primary-9))" height={1} />
             <body
                 className={tcls(
                     'bg-tint-base',
