Merge pull request #37 from thomasKn/thomas/fv-245-navigation-progres…

…s-bar Add delay to nav progress animation
frontvibe · Feb 6, 2024 · 9200b6b · 9200b6b
2 parents fdadf77 + 5d91893
commit 9200b6b
Showing 1 changed file with 32 additions and 23 deletions.
diff --git a/app/components/layout/NavigationProgressBar.tsx b/app/components/layout/NavigationProgressBar.tsx
@@ -1,7 +1,6 @@
 import {useNavigation} from '@remix-run/react';
 import {useNProgress} from '@tanem/react-nprogress';
-
-import {cn} from '~/lib/utils';
+import {AnimatePresence, m} from 'framer-motion';
 
 export function NavigationProgressBar() {
   const navigation = useNavigation();
@@ -11,27 +10,37 @@ export function NavigationProgressBar() {
   });
 
   return (
-    <div
-      className={cn([isFinished ? 'opacity-0' : 'opacity-100'])}
-      style={{
-        transition: `opacity ${animationDuration}ms linear`,
-      }}
-    >
-      <div
-        className="fixed left-0 top-0 z-[1042] h-[3px] w-full rounded-r-full bg-primary"
-        style={{
-          marginLeft: `${(-1 + progress) * 100}%`,
-          transition: `margin-left ${animationDuration}ms linear`,
-        }}
-      >
-        <div
-          className="absolute right-0 block h-full w-[100px] translate-y-[-4px] rotate-3 opacity-100"
-          style={{
-            boxShadow:
-              '0 0 10px rgb(var(--primary)), 0 0 5px rgb(var(--primary))',
+    <AnimatePresence>
+      {!isFinished && (
+        <m.div
+          animate={{opacity: 1}}
+          exit={{opacity: 0}}
+          initial={{opacity: 0}}
+          transition={{
+            delay: 0.15,
+            duration: animationDuration / 1000,
           }}
-        />
-      </div>
-    </div>
+        >
+          <m.div
+            animate={{
+              marginLeft: `${(-1 + progress) * 100}%`,
+              transition: {
+                duration: animationDuration / 1000,
+                ease: 'linear',
+              },
+            }}
+            className="fixed left-0 top-0 z-[1042] h-[3px] w-full rounded-r-full bg-primary"
+          >
+            <div
+              className="absolute right-0 block h-full w-[100px] translate-y-[-4px] rotate-3 opacity-100"
+              style={{
+                boxShadow:
+                  '0 0 10px rgb(var(--primary)), 0 0 5px rgb(var(--primary))',
+              }}
+            />
+          </m.div>
+        </m.div>
+      )}
+    </AnimatePresence>
   );
 }