Skeleton finished 70%

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -71,7 +71,7 @@ const CreateOffer = ({ history, closeCreateOfferModal, editOffer, offer }) => {
     selectIsLoadingByActionType(LOGIN_USER_LOADING)
   );
 
-  const handleApiResponseSuccess = (status) => {
+  const handleApiResponseSuccess = () => {
     if (editOffer === undefined) {
       const userId = historyRouter.location.pathname.slice(
         9,

src/components/Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled.js

@@ -4,22 +4,8 @@ import selectedTheme from "../../../../themes";
 import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
 
 export const ItemsTransition = styled(Box)`
-  transition: ${(props) => (props.animationStage === 3 ? "0.9s" : "0")};
-  background: linear-gradient(
-      to left,
-      ${selectedTheme.filterSkeletonItems} 20%,
-      ${selectedTheme.filterSkeletonItems},
-      ${selectedTheme.filterSkeletonItemsSecond},
-      ${selectedTheme.filterSkeletonItemsSecond} 40%,
-      ${selectedTheme.filterSkeletonItemsSecond} 60%,
-      ${selectedTheme.filterSkeletonItemsSecond},
-      ${selectedTheme.filterSkeletonItems},
-      ${selectedTheme.filterSkeletonItems} 80%
-    )
-    right;
-  background-size: 500% 100%;
-  background-position: ${(props) =>
-    props.animationStage !== 2 ? "left" : "right"};
+  transition: 0.4s;
+  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonItems : selectedTheme.filterSkeletonItemsSecond} !important;
 `;
 
 export const SkeletonOfferCardContainer = styled(BackgroundTransition)`

src/components/MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled.js

@@ -3,22 +3,8 @@ import styled from "styled-components";
 import selectedTheme from "../../../../themes";
 
 export const BackgroundTransition = styled(Box)`
-  background: linear-gradient(
-      to left,
-      ${selectedTheme.filterSkeletonBackground} 20%,
-      ${selectedTheme.filterSkeletonBackground},
-      ${selectedTheme.filterSkeletonBackgroundSecond},
-      ${selectedTheme.filterSkeletonBackgroundSecond} 40%,
-      ${selectedTheme.filterSkeletonBackgroundSecond} 60%,
-      ${selectedTheme.filterSkeletonBackgroundSecond},
-      ${selectedTheme.filterSkeletonBackground},
-      ${selectedTheme.filterSkeletonBackground} 80%
-    )
-    right;
-  background-size: 500% 100%;
-  background-position: ${(props) =>
-    props.animationStage !== 2 ? "left" : "right"};
-  transition: ${(props) => (props.animationStage === 3 ? "0.9s" : "0")};
+  transition: 0.4s;
+  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonBackground : selectedTheme.filterSkeletonBackgroundSecond} !important;
 `;
 
 export const SkeletonHeaderContainer = styled(Box)`

src/pages/HomePage/HomePageMUI.js

@@ -8,10 +8,11 @@ import { useSelector } from "react-redux";
 
 const HomePage = () => {
   const [animationStage, setAnimationStage] = useState(1);
+  const isLoading = useSelector(selectLoaderCount);
 
   const timeout = useCallback(() => {
     setAnimationStage((prevAnimationStage) => {
-      if (prevAnimationStage === 3) return 1;
+      if (prevAnimationStage === 2) return 1;
       return prevAnimationStage + 1;
     });
   }, [animationStage]);
@@ -22,8 +23,7 @@ const HomePage = () => {
       newTimeout = setTimeout(timeout, 900);
     }
     return () => clearTimeout(newTimeout);
-  }, [timeout]);
-  const isLoading = useSelector(selectLoaderCount);
+  }, [timeout, isLoading]);
   return (
     <HomePageContainer>
       <MainLayout