feat(ImgLoader): set position to be handled when aspect ratio

aneurysmjs · Jun 3, 2019 · 7ac1080 · 7ac1080
1 parent c47cb33
commit 7ac1080
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/app/components/shared/ImgLoader/ImgLoader.js b/src/app/components/shared/ImgLoader/ImgLoader.js
@@ -21,7 +21,11 @@ function ImgLoader({ src, onError }: PropsType) {
   }, [src, image, onError]);
 
   return (
-    imgObj.isLoading ? (<Spinner />) : (<img className="imgLoader img-fluid" src={imgObj.img} alt="img" />)
+    imgObj.isLoading ? (
+      <span className="imgLoader__spinner">
+        <Spinner />
+      </span>
+    ) : (<img className="imgLoader" src={imgObj.img} alt="img" />)
   );
 }
 

diff --git a/src/app/components/shared/ImgLoader/ImgLoader.scss b/src/app/components/shared/ImgLoader/ImgLoader.scss
@@ -2,6 +2,19 @@
 @import '~styles/mixins';
 @import '~styles/variables';
 
+$pos: calc(50% - 24px);
+
 .imgLoader {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
 
+.imgLoader__spinner {
+  left: $pos;
+  position: absolute;
+  right: 0;
+  top: $pos;
 }