theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: NProgress Loader entre chaque page

Browse Source
This commit is contained in:
Divlo
2020-03-21 20:48:46 +01:00
parent c7115144bf
commit 3debd85a70
5 changed files with 108 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/components/FunctionCard/FunctionCard.js
View File

@ -1,5 +1,5 @@
import Link from 'next/link';
import { useState, Fragment, forwardRef } from 'react';
import { useState, forwardRef } from 'react';
import Loader from '../Loader/Loader';
import './FunctionCard.css';
@ -13,23 +13,21 @@ const FunctionCard = forwardRef((props, ref) => {
return (
<Link href={`/functions/${props.slug}`}>
<Fragment>
{/* Elément à une hauteur pendant chargement */}
<div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
{isLoading && <Loader width="125px" height="125px" />}
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
<div className="FunctionCard__top">
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
<h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description">{props.description}</p>
</div>
<div className="FunctionCard__info">
<p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
<p className="FunctionCard__publication-date">{props.publicationDate}</p>
</div>
{/* Elément à une hauteur pendant chargement */}
<div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
{isLoading && <Loader width="125px" height="125px" />}
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
<div className="FunctionCard__top">
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
<h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description">{props.description}</p>
</div>
<div className="FunctionCard__info">
<p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
<p className="FunctionCard__publication-date">{props.publicationDate}</p>
</div>
</div>
</Fragment>
</div>
</Link>
);
})