From b0ebd69d5b5f6dfed4e82528dff1b913a4240dc8 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 16 Dec 2023 21:37:20 +0100
Subject: fix(branding): do not reanimate branding on route change

The branding animation should occurs only once. Since we're changing
the heading from a h1 to a p and vice-versa, the CSS animation was
retriggered. By using a ref to make sure it is the first render, we can
prevent this behaviour.
---
 src/components/templates/layout/site-header/site-branding.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/templates/layout/site-header/site-branding.tsx b/src/components/templates/layout/site-header/site-branding.tsx
index f5a845d..76ab653 100644
--- a/src/components/templates/layout/site-header/site-branding.tsx
+++ b/src/components/templates/layout/site-header/site-branding.tsx
@@ -3,6 +3,8 @@ import {
   type CSSProperties,
   forwardRef,
   type ForwardRefRenderFunction,
+  useEffect,
+  useRef,
 } from 'react';
 import { useIntl } from 'react-intl';
 import { CONFIG } from '../../../../utils/config';
@@ -32,6 +34,7 @@ const SiteBrandingWithRef: ForwardRefRenderFunction<
   SiteBrandingProps
 > = ({ isHome = false, ...props }, ref) => {
   const intl = useIntl();
+  const isFirstRender = useRef(true);
   const photoAltText = intl.formatMessage(
     {
       defaultMessage: '{website} picture',
@@ -49,6 +52,10 @@ const SiteBrandingWithRef: ForwardRefRenderFunction<
     { website: CONFIG.name }
   );
 
+  useEffect(() => {
+    isFirstRender.current = false;
+  }, []);
+
   return (
     <Branding
       {...props}
@@ -77,7 +84,9 @@ const SiteBrandingWithRef: ForwardRefRenderFunction<
           className={styles.title}
           isFake={!isHome}
           level={1}
-          style={brandingTitleStyles}
+          style={
+            isFirstRender.current ? brandingTitleStyles : { animation: 'none' }
+          }
         >
           {CONFIG.name}
         </Heading>
-- 
cgit v1.2.3