feat(components/base): create <Spinner />

use on <ImgLoader />

src/app/components/base/Spinner/Spinner.js

@@ -0,0 +1,29 @@
+// @flow strict
+import React from 'react';
+
+import './Spinner.scss';
+
+type PropsType = {
+  height: number | string,
+  width: number | string,
+};
+
+const Spinner = ({ height, width }: PropsType) => (
+  <div
+    style={{
+      height: `${height}px`,
+      width: `${width}px`,
+    }}
+    className="spinner"
+  >
+    <div className="spinner__outer-circle" />
+    <div className="spinner__inner-circle" />
+  </div>
+);
+
+Spinner.defaultProps = {
+  height: '24',
+  width: '24',
+};
+
+export default Spinner;

src/app/components/base/Spinner/Spinner.scss

@@ -0,0 +1,38 @@
+@import '~styles/functions/px-to-rem';
+@import '~styles/mixins';
+@import '~styles/variables';
+
+.spinner {
+  display: inline-block;
+  position: relative;
+
+  @include element(outer-circle) {
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    border-radius: 50%;
+    border: px-to-rem(4) solid #222222;
+    opacity: 1;
+    position: absolute;
+  }
+
+  @include element(inner-circle) {
+    animation-delay: -0.5s;
+  }
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: px-to-rem(28);
+    left: px-to-rem(28);
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+
+  100% {
+    top: -1px;
+    left: -1px;
+    width: px-to-rem(58);
+    height: px-to-rem(58);
+    opacity: 0;
+  }
+}

src/app/components/base/Spinner/Spinner.test.js

@@ -0,0 +1,13 @@
+// @flow strict
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Spinner from './Spinner';
+
+describe('Spinner', () => {
+  const defaultProps = {};
+
+  it('tests something', () => {
+    shallow(<Spinner {...defaultProps} />);
+  });
+});

src/app/components/shared/ImgLoader/ImgLoader.js

@@ -1,6 +1,8 @@
 // @flow strict
 import React, { useState } from 'react';
 
+import Spinner from '@/components/base/Spinner/Spinner';
+
 import './ImgLoader.scss';
 
 type PropsType = {
@@ -15,7 +17,7 @@ function ImgLoader({ src }: PropsType) {
   image.src = src;
 
   return (
-    imgObj.isLoading ? 'Loading...' : (<img className="imgLoader img-fluid" src={imgObj.img} alt="img" />)
+    imgObj.isLoading ? (<Spinner />) : (<img className="imgLoader img-fluid" src={imgObj.img} alt="img" />)
   );
 }
 

src/app/components/shared/ProductCard/ProductCard.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 
 import ImgLoader from '@/components/shared/ImgLoader/ImgLoader';
-// import spinner from '@/components/shared/ImgLoader/ImgLoader';
 
 import './ProductCard.scss';