From 633a7d68cf6d01d437dab6fbce7b1287db5b4b0c Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 28 Jun 2022 20:29:55 +0200
Subject: [PATCH] placeholder image when loading

---
 .../available-versions/available-version-item.component.tsx   | 4 ++--
 src/renderer/components/shared/bsm-image.component.tsx        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx
index bd67bd04..c9bf0500 100644
--- a/src/renderer/components/available-versions/available-version-item.component.tsx
+++ b/src/renderer/components/available-versions/available-version-item.component.tsx
@@ -38,8 +38,8 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
     <div className="group m-3 relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
       <div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "opacity-100"}`}></div>
       <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 cursor-pointer group-hover:shadow-none duration-300 bg-light-main-color-2 dark:bg-main-color-2 ${!selected && "shadow-lg shadow-gray-900"}`}>
-        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
-        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
+        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
+        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
         <div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
           <div>
             <span className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</span>
diff --git a/src/renderer/components/shared/bsm-image.component.tsx b/src/renderer/components/shared/bsm-image.component.tsx
index f0658d58..ad0c3ceb 100644
--- a/src/renderer/components/shared/bsm-image.component.tsx
+++ b/src/renderer/components/shared/bsm-image.component.tsx
@@ -1,6 +1,6 @@
-export function BsmImage({className, image, errorImage, loading}: {className?: string, image: string, errorImage?: string, loading?: "lazy"|"eager"}) {
+export function BsmImage({className, image, errorImage, placeholder, loading}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager"}) {
 
   return (
-    <img className={className} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage ? errorImage : "" }}/>
+    <img className={className} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage ? errorImage : "" }} style={{backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}}/>
   )
 }