Add loading indicator

2026-09-12 05:48:57 +00:00 · 2025-03-26 21:48:33 +01:00
3 changed files with 6 additions and 1 deletions
@@ -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=="],
@@ -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",
@@ -21,6 +21,7 @@ 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';
@@ -28,7 +29,6 @@ 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',