Merge branch 'Weaverse:main' into main

app/components/global-loading.tsx

@@ -0,0 +1,46 @@
+import {useNavigation} from '@remix-run/react';
+import cx from 'clsx';
+import {useEffect, useRef, useState} from 'react';
+
+export function GlobalLoading() {
+  let transition = useNavigation();
+  let active = transition.state !== 'idle';
+
+  let ref = useRef<HTMLDivElement>(null);
+  let [animating, setAnimating] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    Promise.allSettled(
+      ref.current.getAnimations().map(({finished}) => finished),
+    ).then(() => {
+      if (!active) setAnimating(false);
+    });
+
+    if (active) {
+      let id = setTimeout(() => setAnimating(true), 100);
+      return () => clearTimeout(id);
+    }
+  }, [active]);
+
+  return (
+    <div
+      role="progressbar"
+      aria-hidden={!active}
+      aria-valuetext={active ? 'Loading' : undefined}
+      className="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse"
+    >
+      <div
+        ref={ref}
+        className={cx(
+          'h-full bg-gradient-to-r from-primary to-secondary transition-all duration-500 ease-in-out',
+          transition.state === 'idle' &&
+            (animating ? 'w-full' : 'w-0 opacity-0 transition-none'),
+          transition.state === 'submitting' && 'w-4/12',
+          transition.state === 'loading' && 'w-10/12',
+        )}
+      />
+    </div>
+  );
+}

app/root.tsx

@@ -40,6 +40,7 @@ import {NotFound} from './components/NotFound';
 import styles from './styles/app.css?url';
 import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import {GlobalStyle} from './weaverse/style';
+import {GlobalLoading} from '~/components/global-loading';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -156,6 +157,7 @@ function App() {
           </Layout>
           <CustomAnalytics />
         </Analytics.Provider>
+        <GlobalLoading />
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
       </body>