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

frontend: Pagination au scroll

Browse Source
This commit is contained in:
Divlo
2020-03-21 18:24:10 +01:00
parent 895d0c7f6b
commit ea13959c91
2 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
import Link from 'next/link';
import { useState, Fragment } from 'react';
import { useState, Fragment, forwardRef } from 'react';
import Loader from '../Loader/Loader';
import './FunctionCard.css';
const FunctionCard = (props) => {
const FunctionCard = forwardRef((props, ref) => {
const [isLoading, setIsLoading] = useState(true);
@ -14,8 +14,9 @@ const FunctionCard = (props) => {
return (
<Link href={`/functions/${props.slug}`}>
<Fragment>
<div className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
{isLoading && <Loader width="100px" height="100px" />}
{/* Elément à une hauteur pendant chargement */}
<div ref={ref} style={isLoading ? { height: "200px", 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} />
@ -31,6 +32,6 @@ const FunctionCard = (props) => {
</Fragment>
</Link>
);
}
})
export default FunctionCard;