Skip to content

Commit

Permalink
feat: improve loadbar behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
@johangirod
johangirod committed Jun 5, 2024
1 parent 3ccd2b7 commit e4d0b13
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 97 deletions.
164 changes: 83 additions & 81 deletions components/header/header-core/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,99 +30,101 @@ export const HeaderCore: React.FC<IProps> = ({
pathFrom,
}) => {
return (
<header
role="banner"
className="fr-header"
style={{ filter: !useSearchBar ? 'none' : undefined }}
>
<>
<LoadBar session={session} />
<InfoBanner />
<header
role="banner"
className="fr-header"
style={{ filter: !useSearchBar ? 'none' : undefined }}
>
<InfoBanner />

<PrintNever>
<form
id="search-bar-form"
action={useMap ? '/rechercher/carte' : '/rechercher'}
method="get"
>
<div className="fr-header__body">
<div className="fr-container">
<div className="fr-header__body-row">
<div
className="fr-header__brand"
style={{
filter: !useSearchBar ? 'none' : undefined,
}}
>
<div className="fr-header__brand-top">
<div className="fr-header__logo">
<a href="/" title="République française">
<p className="fr-logo">
République
<br />
française
</p>
</a>
</div>
{useSearchBar || useLogo ? (
<div
style={{
order: '2',
marginRight: '15px',
}}
>
<a href="/" title="L’Annuaire des Entreprises">
<svg
width={140}
height={54}
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 137 61"
>
<path
d="m26.5 0 26.4 15.3v30.4L26.5 61 .1 45.7V15.3L26.5 0Z"
fill="#E8EDFF"
/>
<path
d="M13.4 27H19v1.5h-7.4V15.6h1.8V27ZM19.3 15a3.4 3.4 0 0 1 .5 1.7c0 .5-.1 1-.4 1.5-.2.5-.6 1-1 1.4l-.6-.3v-.1l-.1-.1v-.2a4.6 4.6 0 0 0 .6-.8l.2-.5a2 2 0 0 0 0-1.1l-.3-.7v-.2l.1-.3 1-.4ZM21 28.5h3.4l1-3H30l1 3h3.4L29.7 16h-4.1L21 28.5Zm5.4-5.7 1.3-3.7 1.2 3.7h-2.5ZM36.5 28.5h2.9V23c.1-.3.6-1.1 1.6-1.1s1.4.6 1.4 1.5v5.2h2.9v-5.3c0-2.8-1.6-4.1-3.5-4.1-1.1 0-1.9.3-2.4.8v-.5h-3v9.1ZM47.7 28.5h2.9V23c.2-.3.6-1.1 1.6-1.1s1.4.6 1.4 1.5v5.2h2.9v-5.3c0-2.8-1.6-4.1-3.5-4.1-1 0-1.8.3-2.4.8v-.5h-2.9v9.1ZM64.7 24.6c0 1-.5 1.6-1.5 1.6-1.1 0-1.6-.7-1.6-1.6v-5.2h-2.9v5c0 2.7 1.6 4.5 4.4 4.5 2.8 0 4.5-1.8 4.5-4.5v-5h-3v5.2ZM72.3 28.8c1 0 2-.4 2.5-1v.7h2.9v-5.7c0-2-1.4-3.7-4.2-3.7-1.7 0-3.1.7-4 1.8l2.1 1.6c.4-.6 1-1 1.8-1s1.4.6 1.4 1.2l-2.5.5c-2 .3-3 1.4-3 2.8 0 1.7 1.2 2.8 3 2.8Zm-.3-3c0-.4.3-.7 1-.8l1.8-.3v.9c-.3.5-1 1-1.8 1-.6 0-1-.3-1-.8ZM81.6 18.4c1 0 1.7-.8 1.7-1.8s-.8-1.8-1.7-1.8c-1 0-1.9.9-1.9 1.8 0 1 .9 1.8 1.9 1.8ZM80 28.5H83v-9H80v9ZM85.5 28.5h2.8V23c.2-.3 1-1 2-1l1 .2v-2.8l-.8-.1c-.9 0-1.6.4-2.2.9v-.8h-2.8v9.1ZM101.4 27l-2-1.6c-.4.6-1.2 1-2 1-1.1 0-2-.4-2.2-1.6h5.9l.2-1.5c0-2.5-1.7-4.2-4.3-4.2-3 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4.1-1.8ZM97 21.5c1 0 1.6.7 1.6 1.3h-3.3c.2-.9.8-1.3 1.7-1.3ZM108.1 24c0 2.6 1.8 4.9 4.7 4.9 1.3 0 2.4-.6 3.2-1.5v1.1h1.5V15H116v5.5c-.8-.9-1.9-1.4-3.2-1.4-2.9 0-4.7 2.2-4.7 4.9Zm1.6 0c0-2 1.3-3.5 3.2-3.5 1.3 0 2.4.6 3 1.7v3.6c-.6 1-1.7 1.6-3 1.6-1.9 0-3.2-1.5-3.2-3.4ZM129 27l-1.2-.9c-.5.8-1.5 1.4-2.7 1.4-2 0-3.3-1.3-3.4-3.5h7v-1c0-2.2-1.5-4-4-4-2.8 0-4.6 2.2-4.6 5 0 2.6 2 4.9 5 4.9 1.7 0 3-.8 3.9-1.9Zm-4.3-6.6c1.6 0 2.5 1 2.6 2.4h-5.5c.3-1.5 1.4-2.4 2.9-2.4ZM130.5 27.3c.8 1 2 1.6 3.4 1.6 1.7 0 3-1 3-2.8 0-3-4.5-2.4-4.5-4.5 0-.7.5-1.2 1.5-1.2.8 0 1.5.4 2 1l1-.8a3.7 3.7 0 0 0-3-1.5c-1.8 0-3 1.1-3 2.6 0 3.2 4.6 2.5 4.6 4.5 0 .8-.6 1.4-1.6 1.4s-1.7-.5-2.3-1.3l-1 1ZM21.8 46.5h7.8V44H25v-2.5H29v-2.6H25v-2.2h4.6v-2.7h-7.8v12.6ZM32.2 46.5H35V41c.2-.3.7-1.1 1.7-1.1.9 0 1.4.6 1.4 1.5v5.2H41v-5.3c0-2.8-1.6-4.1-3.6-4.1-1 0-1.8.3-2.4.8v-.5h-2.8v9.1ZM44 43c0 2.2 1 3.7 3.5 3.7.9 0 1.4-.1 2-.3v-2.5l-1.5.2c-.7 0-1.1-.4-1.1-1.1v-3h2.5v-2.6h-2.5v-2.2H44v2.2h-1.7V40H44v3ZM51.4 46.5h2.8V41c.2-.3.9-1 2-1l1 .2v-2.8l-.8-.1c-.9 0-1.6.4-2.2.9v-.8h-2.8v9.1ZM67.3 45l-2-1.6c-.4.6-1.2 1-2 1-1.1 0-2-.4-2.2-1.6H67l.2-1.5c0-2.5-1.7-4.2-4.3-4.2-3 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4.1-1.8Zm-4.5-5.6c1 0 1.5.7 1.6 1.3H61c.2-.9.8-1.3 1.7-1.3ZM69.3 51H72v-5c.7.6 1.4.9 2.6.9 2.9 0 4.5-2.3 4.5-5 0-2.6-1.6-4.8-4.5-4.8-1.2 0-2 .3-2.6.8v-.5h-2.8V51Zm5-11.2c1.2 0 2 .8 2 2.2 0 1.3-.8 2.2-2 2.2-1 0-1.6-.4-2.2-1v-2.4c.5-.6 1.2-1 2.1-1ZM81.2 46.5h2.9V41c.1-.3.8-1 1.9-1l1 .2v-2.8l-.7-.1c-1 0-1.7.4-2.2.9v-.8h-2.9v9.1ZM90.3 36.4c1 0 1.7-.8 1.7-1.8s-.8-1.8-1.7-1.8c-1 0-1.9.9-1.9 1.8 0 1 .9 1.8 1.9 1.8Zm-1.5 10.1h2.9v-9h-2.9v9ZM93.3 45.1c1 1 2.1 1.8 3.9 1.8 1.7 0 3.4-1 3.4-3.1 0-3.2-4.2-2.7-4.2-3.9 0-.3.3-.6.8-.6.6 0 1.1.5 1.6 1l1.9-1.6c-.7-1-2.1-1.6-3.5-1.6-2 0-3.5 1.2-3.5 3 0 3.1 4.2 2.6 4.2 3.9 0 .3-.3.6-.8.6-.8 0-1.4-.5-1.9-1.2l-1.9 1.7ZM111.2 45l-2-1.6c-.5.6-1.2 1-2 1-1.2 0-2-.4-2.2-1.6h5.9l.1-1.5c0-2.5-1.7-4.2-4.2-4.2-3.1 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4-1.8Zm-4.5-5.6c1 0 1.5.7 1.6 1.3H105c.2-.9.8-1.3 1.7-1.3ZM112.3 45.1c1 1 2 1.8 3.8 1.8 1.8 0 3.5-1 3.5-3.1 0-3.2-4.2-2.7-4.2-3.9 0-.3.2-.6.7-.6.7 0 1.2.5 1.7 1l1.8-1.6c-.7-1-2-1.6-3.5-1.6-2 0-3.4 1.2-3.4 3 0 3.1 4.2 2.6 4.2 3.9 0 .3-.3.6-.8.6-.8 0-1.4-.5-2-1.2l-1.8 1.7Z"
fill="#161616"
/>
</svg>
<PrintNever>
<form
id="search-bar-form"
action={useMap ? '/rechercher/carte' : '/rechercher'}
method="get"
>
<div className="fr-header__body">
<div className="fr-container">
<div className="fr-header__body-row">
<div
className="fr-header__brand"
style={{
filter: !useSearchBar ? 'none' : undefined,
}}
>
<div className="fr-header__brand-top">
<div className="fr-header__logo">
<a href="/" title="République française">
<p className="fr-logo">
République
<br />
française
</p>
</a>
</div>
) : null}
<div className={styles.menuMobile}>
<Menu
session={session}
useAgentCTA={useAgentCTA}
pathFrom={pathFrom}
/>
</div>
</div>
{useSearchBar ? (
<div className={styles.notFrSearch}>
<SearchBar defaultValue={currentSearchTerm} />
</div>
) : null}
</div>
<div className="fr-header__tools">
<div className="fr-header__tools-links">
<ul className="fr-links-group">
<li>
{useSearchBar || useLogo ? (
<div
style={{
order: '2',
marginRight: '15px',
}}
>
<a href="/" title="L’Annuaire des Entreprises">
<svg
width={140}
height={54}
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 137 61"
>
<path
d="m26.5 0 26.4 15.3v30.4L26.5 61 .1 45.7V15.3L26.5 0Z"
fill="#E8EDFF"
/>
<path
d="M13.4 27H19v1.5h-7.4V15.6h1.8V27ZM19.3 15a3.4 3.4 0 0 1 .5 1.7c0 .5-.1 1-.4 1.5-.2.5-.6 1-1 1.4l-.6-.3v-.1l-.1-.1v-.2a4.6 4.6 0 0 0 .6-.8l.2-.5a2 2 0 0 0 0-1.1l-.3-.7v-.2l.1-.3 1-.4ZM21 28.5h3.4l1-3H30l1 3h3.4L29.7 16h-4.1L21 28.5Zm5.4-5.7 1.3-3.7 1.2 3.7h-2.5ZM36.5 28.5h2.9V23c.1-.3.6-1.1 1.6-1.1s1.4.6 1.4 1.5v5.2h2.9v-5.3c0-2.8-1.6-4.1-3.5-4.1-1.1 0-1.9.3-2.4.8v-.5h-3v9.1ZM47.7 28.5h2.9V23c.2-.3.6-1.1 1.6-1.1s1.4.6 1.4 1.5v5.2h2.9v-5.3c0-2.8-1.6-4.1-3.5-4.1-1 0-1.8.3-2.4.8v-.5h-2.9v9.1ZM64.7 24.6c0 1-.5 1.6-1.5 1.6-1.1 0-1.6-.7-1.6-1.6v-5.2h-2.9v5c0 2.7 1.6 4.5 4.4 4.5 2.8 0 4.5-1.8 4.5-4.5v-5h-3v5.2ZM72.3 28.8c1 0 2-.4 2.5-1v.7h2.9v-5.7c0-2-1.4-3.7-4.2-3.7-1.7 0-3.1.7-4 1.8l2.1 1.6c.4-.6 1-1 1.8-1s1.4.6 1.4 1.2l-2.5.5c-2 .3-3 1.4-3 2.8 0 1.7 1.2 2.8 3 2.8Zm-.3-3c0-.4.3-.7 1-.8l1.8-.3v.9c-.3.5-1 1-1.8 1-.6 0-1-.3-1-.8ZM81.6 18.4c1 0 1.7-.8 1.7-1.8s-.8-1.8-1.7-1.8c-1 0-1.9.9-1.9 1.8 0 1 .9 1.8 1.9 1.8ZM80 28.5H83v-9H80v9ZM85.5 28.5h2.8V23c.2-.3 1-1 2-1l1 .2v-2.8l-.8-.1c-.9 0-1.6.4-2.2.9v-.8h-2.8v9.1ZM101.4 27l-2-1.6c-.4.6-1.2 1-2 1-1.1 0-2-.4-2.2-1.6h5.9l.2-1.5c0-2.5-1.7-4.2-4.3-4.2-3 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4.1-1.8ZM97 21.5c1 0 1.6.7 1.6 1.3h-3.3c.2-.9.8-1.3 1.7-1.3ZM108.1 24c0 2.6 1.8 4.9 4.7 4.9 1.3 0 2.4-.6 3.2-1.5v1.1h1.5V15H116v5.5c-.8-.9-1.9-1.4-3.2-1.4-2.9 0-4.7 2.2-4.7 4.9Zm1.6 0c0-2 1.3-3.5 3.2-3.5 1.3 0 2.4.6 3 1.7v3.6c-.6 1-1.7 1.6-3 1.6-1.9 0-3.2-1.5-3.2-3.4ZM129 27l-1.2-.9c-.5.8-1.5 1.4-2.7 1.4-2 0-3.3-1.3-3.4-3.5h7v-1c0-2.2-1.5-4-4-4-2.8 0-4.6 2.2-4.6 5 0 2.6 2 4.9 5 4.9 1.7 0 3-.8 3.9-1.9Zm-4.3-6.6c1.6 0 2.5 1 2.6 2.4h-5.5c.3-1.5 1.4-2.4 2.9-2.4ZM130.5 27.3c.8 1 2 1.6 3.4 1.6 1.7 0 3-1 3-2.8 0-3-4.5-2.4-4.5-4.5 0-.7.5-1.2 1.5-1.2.8 0 1.5.4 2 1l1-.8a3.7 3.7 0 0 0-3-1.5c-1.8 0-3 1.1-3 2.6 0 3.2 4.6 2.5 4.6 4.5 0 .8-.6 1.4-1.6 1.4s-1.7-.5-2.3-1.3l-1 1ZM21.8 46.5h7.8V44H25v-2.5H29v-2.6H25v-2.2h4.6v-2.7h-7.8v12.6ZM32.2 46.5H35V41c.2-.3.7-1.1 1.7-1.1.9 0 1.4.6 1.4 1.5v5.2H41v-5.3c0-2.8-1.6-4.1-3.6-4.1-1 0-1.8.3-2.4.8v-.5h-2.8v9.1ZM44 43c0 2.2 1 3.7 3.5 3.7.9 0 1.4-.1 2-.3v-2.5l-1.5.2c-.7 0-1.1-.4-1.1-1.1v-3h2.5v-2.6h-2.5v-2.2H44v2.2h-1.7V40H44v3ZM51.4 46.5h2.8V41c.2-.3.9-1 2-1l1 .2v-2.8l-.8-.1c-.9 0-1.6.4-2.2.9v-.8h-2.8v9.1ZM67.3 45l-2-1.6c-.4.6-1.2 1-2 1-1.1 0-2-.4-2.2-1.6H67l.2-1.5c0-2.5-1.7-4.2-4.3-4.2-3 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4.1-1.8Zm-4.5-5.6c1 0 1.5.7 1.6 1.3H61c.2-.9.8-1.3 1.7-1.3ZM69.3 51H72v-5c.7.6 1.4.9 2.6.9 2.9 0 4.5-2.3 4.5-5 0-2.6-1.6-4.8-4.5-4.8-1.2 0-2 .3-2.6.8v-.5h-2.8V51Zm5-11.2c1.2 0 2 .8 2 2.2 0 1.3-.8 2.2-2 2.2-1 0-1.6-.4-2.2-1v-2.4c.5-.6 1.2-1 2.1-1ZM81.2 46.5h2.9V41c.1-.3.8-1 1.9-1l1 .2v-2.8l-.7-.1c-1 0-1.7.4-2.2.9v-.8h-2.9v9.1ZM90.3 36.4c1 0 1.7-.8 1.7-1.8s-.8-1.8-1.7-1.8c-1 0-1.9.9-1.9 1.8 0 1 .9 1.8 1.9 1.8Zm-1.5 10.1h2.9v-9h-2.9v9ZM93.3 45.1c1 1 2.1 1.8 3.9 1.8 1.7 0 3.4-1 3.4-3.1 0-3.2-4.2-2.7-4.2-3.9 0-.3.3-.6.8-.6.6 0 1.1.5 1.6 1l1.9-1.6c-.7-1-2.1-1.6-3.5-1.6-2 0-3.5 1.2-3.5 3 0 3.1 4.2 2.6 4.2 3.9 0 .3-.3.6-.8.6-.8 0-1.4-.5-1.9-1.2l-1.9 1.7ZM111.2 45l-2-1.6c-.5.6-1.2 1-2 1-1.2 0-2-.4-2.2-1.6h5.9l.1-1.5c0-2.5-1.7-4.2-4.2-4.2-3.1 0-4.7 2.2-4.7 4.9 0 2.6 1.7 4.9 5 4.9a5 5 0 0 0 4-1.8Zm-4.5-5.6c1 0 1.5.7 1.6 1.3H105c.2-.9.8-1.3 1.7-1.3ZM112.3 45.1c1 1 2 1.8 3.8 1.8 1.8 0 3.5-1 3.5-3.1 0-3.2-4.2-2.7-4.2-3.9 0-.3.2-.6.7-.6.7 0 1.2.5 1.7 1l1.8-1.6c-.7-1-2-1.6-3.5-1.6-2 0-3.4 1.2-3.4 3 0 3.1 4.2 2.6 4.2 3.9 0 .3-.3.6-.8.6-.8 0-1.4-.5-2-1.2l-1.8 1.7Z"
fill="#161616"
/>
</svg>
</a>
</div>
) : null}
<div className={styles.menuMobile}>
<Menu
session={session}
useAgentCTA={useAgentCTA}
pathFrom={pathFrom}
/>
</li>
</ul>
</div>
</div>
{useSearchBar ? (
<div className={styles.notFrSearch}>
<SearchBar defaultValue={currentSearchTerm} />
</div>
) : null}
</div>
<div className="fr-header__tools">
<div className="fr-header__tools-links">
<ul className="fr-links-group">
<li>
<Menu
session={session}
useAgentCTA={useAgentCTA}
pathFrom={pathFrom}
/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{plugin}
</form>
</PrintNever>
</header>
{plugin}
</form>
</PrintNever>
</header>
</>
);
};
38 changes: 22 additions & 16 deletions components/load-bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,27 @@ import { useEffect } from 'react';
import constants from '#models/constants';
import { EScope, hasRights } from '#models/user/rights';
import { ISession } from '#models/user/session';

import styles from './style.module.css';
export default function LoadBar({ session }: { session: ISession | null }) {
useEffect(() => {
const loadBar = loadBarFactory();
if (typeof window !== 'undefined') {
window.addEventListener('beforeunload', loadBar.run);
window.addEventListener('runloadbar', loadBar.run);
window.addEventListener('cancelloadbar', loadBar.cancel);
window.addEventListener(
'beforeunload',
loadBar.runWithDelay.bind(loadBar)
);
window.addEventListener('runloadbar', loadBar.runImmediate.bind(loadBar));
window.addEventListener('cancelloadbar', loadBar.cancel.bind(loadBar));
}
}, []);
return (
<div
id="loader-bar"
className={styles['load-bar']}
style={{
background: hasRights(session, EScope.isAgent)
? constants.colors.espaceAgent
: 'transparent',
transition: 'width 300ms ease-in-out',
height: '3px',
position: 'fixed',
top: '0',
width: '0',
zIndex: '10000',
}}
/>
);
Expand Down Expand Up @@ -73,8 +71,7 @@ const loadBarFactory = () => {
return {
_currentJobId: '',
_loader: null as HTMLElement | null,

run: async function () {
async _run(step: number) {
const jobId = Math.random().toString(16).substring(7);

this._currentJobId = jobId;
Expand All @@ -86,19 +83,28 @@ const loadBarFactory = () => {
return;
}
}

for (let w of positions) {
this._loader.style.opacity = '1';
for (let i = step; i < positions.length; i++) {
// interrupt job if another job has been triggered by another beforeunload event
if (this._currentJobId !== jobId) {
return;
}
this._loader.style.width = `${w}vw`;
this._loader.style.width = `${positions[i]}%`;
await wait(200);
}
},
cancel: function () {
runImmediate() {
this._run(2);
},
runWithDelay() {
this._run(0);
},
async cancel() {
this._currentJobId = '';
if (this._loader) {
this._loader.style.width = '100%';
this._loader.style.opacity = '0';
await wait(200);
this._loader.style.width = '0';
}
},
Expand Down
9 changes: 9 additions & 0 deletions components/load-bar/style.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.load-bar {
transition: all 200ms ease-in-out;
height: 3px;
width: 0;
opacity: 0;
position: fixed;
top: 0;
z-index: 9999;
}
3 changes: 3 additions & 0 deletions components/title-section/tabs/tab-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export default function TabLink({
useEffect(() => {
active === false && window.dispatchEvent(new Event('cancelloadbar'));
}, [active]);
useEffect(() => {
window.dispatchEvent(new Event('cancelloadbar'));
}, []);
return (
<Link
className={`${active ? styles.activeLink : ''} no-style-link`}
Expand Down

0 comments on commit e4d0b13

Please sign in to comment.