diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-12-16 21:37:20 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-12-16 21:37:20 +0100 |
| commit | b0ebd69d5b5f6dfed4e82528dff1b913a4240dc8 (patch) | |
| tree | 32e3a375c660b3afc4b32a4e6e2ddda98abecc98 /src/components | |
| parent | 9dfbd6e7e8749543b318fc7937501d102129bd1b (diff) | |
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.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/templates/layout/site-header/site-branding.tsx | 11 |
1 files changed, 10 insertions, 1 deletions
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> |