apply BoxLoader on MainPage #66

Bletcher-Project · Mar 4, 2021 · 3ffdd0e · 3ffdd0e
1 parent 6e95bb0
commit 3ffdd0e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/Components/Loader/Box/index.scss b/src/Components/Loader/Box/index.scss
@@ -10,7 +10,7 @@
   position: relative;
   border: 3px solid;
   display: inline-block;
-  animation: rect-rotate 2s linear infinite;
+  animation: rect-rotate 1.5s linear infinite;
 }
 
 .boxLoader::after {
@@ -21,7 +21,7 @@
   display: block;
   background: $main-color;
   opacity: 0.5;
-  animation: fill-rect 2s linear infinite;
+  animation: fill-rect 1.5s linear infinite;
 }
 
 @keyframes rect-rotate {

diff --git a/src/Pages/MainPage/index.jsx b/src/Pages/MainPage/index.jsx
@@ -5,7 +5,7 @@ import { getMainPosts } from 'Redux/fetch-post';
 
 import NavBar from 'Components/Common/NavBar';
 import Jumbotron from 'Components/Common/Jumbotron';
-import Loader from 'Components/Common/Loader';
+import BoxLoader from 'Components/Loader/Box';
 import Post from 'Components/Post/Post';
 import PostList from 'Components/Post/PostList';
 import MixButton from 'Components/Post/PostButton/MixButton';
@@ -61,7 +61,7 @@ function MainPage() {
       <NavBar isActive="main" />
       <Jumbotron title="Find out" description="What other people painted" />
       <MixChecker />
-      <PostList posts={!loading ? renderPosts() : <Loader />} />
+      <PostList posts={!loading ? renderPosts() : <BoxLoader />} />
     </div>
   );
 }