From 013796d8d339be9c9bd5e3cfca34361ee2f0eb22 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Fri, 12 May 2023 10:30:24 +0200
Subject: [PATCH] :art: loader on image get from ipfs

---
 .../FilePreview/classes.module.scss             | 16 +++++++++++++++-
 .../DesignSystem/FilePreview/index.tsx          | 17 +++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/front/Components/DesignSystem/FilePreview/classes.module.scss b/src/front/Components/DesignSystem/FilePreview/classes.module.scss
index b359b71f..b240b483 100644
--- a/src/front/Components/DesignSystem/FilePreview/classes.module.scss
+++ b/src/front/Components/DesignSystem/FilePreview/classes.module.scss
@@ -1,9 +1,12 @@
 .root {
 	height: inherit;
 	min-height: inherit;
+	position: relative;
+
 	.file-container {
 		height: inherit;
 		min-height: inherit;
+
 		.image {
 			width: 100%;
 			height: inherit;
@@ -17,4 +20,15 @@
 			height: inherit;
 		}
 	}
-}
+
+	.loader {
+		width: 48px;
+		height: 48px;
+		z-index: -1;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/FilePreview/index.tsx b/src/front/Components/DesignSystem/FilePreview/index.tsx
index abc4f51b..d7e6f794 100644
--- a/src/front/Components/DesignSystem/FilePreview/index.tsx
+++ b/src/front/Components/DesignSystem/FilePreview/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import Loader from "../Loader";
 
 type IProps = {
 	href: string;
@@ -12,20 +13,24 @@ type IState = {};
 export default class FilePreview extends React.Component<IProps, IState> {
 	override render() {
 		let type = this.props.href.split(".").pop();
-		if(this.props.fileName) type = this.props.fileName.split(".").pop();
+		if (this.props.fileName) type = this.props.fileName.split(".").pop();
 		return (
 			<div className={classes["root"]}>
+				<div className={classes["loader"]}>
+					<Loader />
+				</div>
+
 				{!type && (
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
 						Erreur lors du chargement du fichier
 					</Typography>
 				)}
 				<div className={classes["file-container"]}>
-						{type?.toLowerCase() === "pdf" && (
-							<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
-						)}
-						{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
-					</div>
+					{type?.toLowerCase() === "pdf" && (
+						<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
+					)}
+					{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
+				</div>
 			</div>
 		);
 	}