fix(ui/post): progress indicator init should start with zero

src/components/application-pane.tsx

@@ -33,10 +33,10 @@ const ApplicationPane: React.FC<ApplicationPaneProps> = ({
   const variants = useMemo(
     () => ({
       open: {
-        transition: { staggerChildren: 0.07, delayChildren: 0.2 },
+        // transition: { staggerChildren: 0.07, delayChildren: 0.2 },
       },
       closed: {
-        transition: { staggerChildren: 0.01, staggerDirection: -1 },
+        // transition: { staggerChildren: 0.01, staggerDirection: -1 },
       },
     }),
     []

src/components/layout.tsx

@@ -163,7 +163,7 @@ const Layout: FC<PropsWithChildren<PageProps>> = ({ children, location }) => {
           />
         )}
         <Header />
-        <StyledMain ref={ref}>
+        <StyledMain id="main" ref={ref}>
           <StaticImage
             className="!fixed top-0 left-0 opacity-bg w-screen h-screen pointer-events-none select-none z-20"
             src="../images/girl.png"

src/components/progress-indicator.tsx

@@ -1,4 +1,6 @@
 import { MotionValue, motion, useSpring } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import cn from 'classnames';
 
 interface ProgressIndicatorProps {
   scrollYProgress: MotionValue<number>;
@@ -11,7 +13,23 @@ const ProgressIndicator = ({ scrollYProgress }: ProgressIndicatorProps) => {
     restDelta: 0.001,
   });
 
-  return <motion.div className="progress-bar z-[51]" style={{ scaleX }} />;
+  const [hasScrollEventFired, setHasScrollEventFired] = useState(false);
+
+  useEffect(() => {
+    const styledMain = document.getElementById('main');
+    if (styledMain == null) return;
+    styledMain.addEventListener('scroll', () => setHasScrollEventFired(true));
+  }, []);
+
+  return (
+    <motion.div
+      className={cn('progress-bar z-[51]', {
+        invisible: !hasScrollEventFired,
+        visible: hasScrollEventFired,
+      })}
+      style={{ scaleX }}
+    />
+  );
 };
 
 export default ProgressIndicator;