fix: playwright

Author: kyranjamie

apps/web/.gitignore

@@ -14,3 +14,5 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.wrangler

apps/web/app/layouts/nav/global-loader.styles.ts

@@ -0,0 +1,41 @@
+import { defineGlobalStyles } from '@pandacss/dev';
+
+// https://unpkg.com/nprogress@0.2.0/nprogress.css
+export const globalLoaderCss = defineGlobalStyles({
+  '#nprogress': {
+    pointerEvents: 'none',
+  },
+
+  '#nprogress .bar': {
+    background: 'black',
+    position: 'fixed',
+    zIndex: 99999,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '1px',
+  },
+
+  '#nprogress .peg': {
+    display: 'block',
+    position: 'absolute',
+    right: '0px',
+    width: '100px',
+    height: '100%',
+    opacity: 1.0,
+    transform: 'rotate(3deg) translate(0px, -4px)',
+  },
+
+  '#nprogress .spinner': {
+    display: 'block',
+    position: 'fixed',
+    zIndex: 1031,
+    top: '15px',
+    right: '15px',
+  },
+
+  '.nprogress-custom-parent': {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+});

apps/web/app/layouts/nav/global-loader.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useNavigation } from 'react-router';
+
+import NProgress from 'nprogress';
+
+import { useOnMount } from '@leather.io/ui';
+
+const config = {
+  color: '#000',
+  minimum: 0.1,
+  showSpinner: false,
+  easing: 'linear',
+  speed: 200,
+  trickle: true,
+  trickleSpeed: 200,
+};
+
+export function GlobalLoader() {
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    let timeOut: ReturnType<typeof setTimeout> | null = null;
+
+    if (navigation.state !== 'idle') {
+      timeOut = setTimeout(() => NProgress.start(), 280);
+    } else if (navigation.state === 'idle') {
+      if (timeOut) clearTimeout(timeOut);
+      NProgress.done();
+    }
+
+    return () => {
+      if (timeOut) clearTimeout(timeOut);
+    };
+  }, [navigation.state]);
+
+  useOnMount(() => void NProgress.configure(config));
+
+  return null;
+}

apps/web/app/root.tsx

@@ -13,6 +13,7 @@ import leatherUiStyles from '@leather.io/ui/styles?url';
 
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
+import { GlobalLoader } from './layouts/nav/global-loader';
 import { Nav } from './layouts/nav/nav';
 
 export function links() {
@@ -32,6 +33,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <styled.body display="flex" height="100vh">
+        <GlobalLoader />
         <Nav />
         <styled.main>{children}</styled.main>
         <ScrollRestoration />

apps/web/package.json

@@ -14,22 +14,23 @@
     "@leather.io/sdk": "workspace:*",
     "@leather.io/ui": "workspace:*",
     "@leather.io/utils": "workspace:*",
-    "@react-router/node": "7.2.0",
-    "@react-router/serve": "7.2.0",
+    "@react-router/node": "7.3.0",
+    "@react-router/serve": "7.3.0",
     "isbot": "5.1.17",
+    "nprogress": "0.2.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-router": "7.2.0",
-    "react-router-dom": "7.2.0"
+    "react-router": "7.3.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "4.20250303.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "@pandacss/dev": "0.53.1",
-    "@playwright/test": "1.50.1",
-    "@react-router/cloudflare": "7.2.0",
-    "@react-router/dev": "7.2.0",
+    "@playwright/test": "1.51.0",
+    "@react-router/cloudflare": "7.3.0",
+    "@react-router/dev": "7.3.0",
     "@types/node": "22.13.5",
+    "@types/nprogress": "0.2.3",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "react-router-devtools": "1.1.6",

apps/web/panda.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from '@pandacss/dev';
 
+import { globalLoaderCss } from './app/layouts/nav/global-loader.styles';
+
 export default defineConfig({
   // Whether to use css reset
   preflight: true,
@@ -10,6 +12,8 @@ export default defineConfig({
     './node_modules/@leather.io/ui/dist-web/**/*.{js,jsx,ts,tsx}',
   ],
 
+  globalCss: globalLoaderCss,
+
   presets: ['@leather.io/panda-preset'],
 
   jsxFramework: 'react',

apps/web/playwright.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   reporter: 'html',
 
   use: {
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://127.0.0.1:8787',
     trace: 'on-first-retry',
   },
 
@@ -36,8 +36,8 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: 'pnpm start',
-    url: 'http://127.0.0.1:3000',
+    command: 'pnpm wrangler dev',
+    url: 'http://127.0.0.1:8787',
     reuseExistingServer: !process.env.CI,
   },
 });

apps/web/tsconfig.node.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["vite.config.ts", "panda.config.ts", "playwright.config.ts"],
+  "include": ["vite.config.ts", "panda.config.ts", "playwright.config.ts", "**/*.styles.ts"],
   "compilerOptions": {
     "composite": true,
     "strict": true,

packages/ui/src/exports.web.ts

@@ -40,3 +40,4 @@ export { Highlighter, type HighlighterProps } from './components/highlighting/hi
 export { Prism, type PrismType } from './components/highlighting/clarity-prism.shared';
 export { Slider } from './components/slider/slider.web';
 export { useClipboard } from './utils/use-clipboard.web';
+export { useOnMount } from './utils/use-on-mount.shared';