Merged with feature 639

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

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
+  SkeletonOfferCardsContainer,
   LeftPart,
   RightPart,
   SkeletonAuthor,
@@ -14,45 +15,84 @@ import {
   SkeletonImage,
   SkeletonLocation,
   SkeletonMessageButton,
+  SkeletonMessageButtonSecond,
   SkeletonOfferCardContainer,
   SkeletonRowGroup,
   SkeletonTitle,
-  SkeletonTitleAboveImage,
+  // SkeletonTitleAboveImage,
   SpreadLine,
 } from "./SkeletonOfferCard.styled";
+import useIsMobile from "../../../../hooks/useIsMobile";
 
 const SkeletonOfferCard = (props) => {
+  const { isMobile } = useIsMobile();
   return (
-    <SkeletonOfferCardContainer skeleton={props.skeleton}>
-      <LeftPart>
-        <SkeletonImage />
-        <SkeletonColumnContainer>
-          <SkeletonTitle />
-          <SkeletonGroup>
-            <SkeletonAuthor />
-            <SkeletonLocation />
-          </SkeletonGroup>
-          <SkeletonRowGroup aboveChat={props.aboveChat}>
-            <SkeletonDetail />
-            <SkeletonDetail />
-            <SkeletonDetail />
-          </SkeletonRowGroup>
-        </SkeletonColumnContainer>
-      </LeftPart>
-      <SpreadLine />
-      <RightPart>
-        <SkeletonDescription />
-        <SkeletonDescriptionLine />
-        <SkeletonDescriptionLine />
-        <SkeletonDescriptionLine />
-        <SkeletonDescriptionLine />
-      </RightPart>
-      <SkeletonExchangeButton>
-        <SkeletonExchangeLine />
-      </SkeletonExchangeButton>
-      <SkeletonMessageButton />
-      <SkeletonTitleAboveImage />
-    </SkeletonOfferCardContainer>
+    <SkeletonOfferCardsContainer>
+      <SkeletonOfferCardContainer skeleton={props.skeleton}>
+        <LeftPart>
+          <SkeletonImage />
+          <SkeletonColumnContainer>
+            <SkeletonTitle />
+            <SkeletonGroup>
+              <SkeletonAuthor />
+              <SkeletonLocation />
+            </SkeletonGroup>
+            <SkeletonRowGroup aboveChat={props.aboveChat}>
+              <SkeletonDetail />
+              <SkeletonDetail />
+              <SkeletonDetail />
+            </SkeletonRowGroup>
+          </SkeletonColumnContainer>
+        </LeftPart>
+        <SpreadLine />
+        <RightPart>
+          <SkeletonDescription />
+          <SkeletonDescriptionLine />
+          <SkeletonDescriptionLine />
+          <SkeletonDescriptionLine />
+          <SkeletonDescriptionLine />
+        </RightPart>
+        <SkeletonExchangeButton>
+          <SkeletonExchangeLine />
+        </SkeletonExchangeButton>
+        <SkeletonMessageButton />
+        {isMobile && <SkeletonMessageButtonSecond />}
+        {/* <SkeletonTitleAboveImage /> */}
+      </SkeletonOfferCardContainer>
+      {isMobile && (
+        <SkeletonOfferCardContainer skeleton={props.skeleton}>
+          <LeftPart>
+            <SkeletonImage />
+            <SkeletonColumnContainer>
+              <SkeletonTitle />
+              <SkeletonGroup>
+                <SkeletonAuthor />
+                <SkeletonLocation />
+              </SkeletonGroup>
+              <SkeletonRowGroup aboveChat={props.aboveChat}>
+                <SkeletonDetail />
+                <SkeletonDetail />
+                <SkeletonDetail />
+              </SkeletonRowGroup>
+            </SkeletonColumnContainer>
+          </LeftPart>
+          <SpreadLine />
+          <RightPart>
+            <SkeletonDescription />
+            <SkeletonDescriptionLine />
+            <SkeletonDescriptionLine />
+            <SkeletonDescriptionLine />
+            <SkeletonDescriptionLine />
+          </RightPart>
+          <SkeletonExchangeButton>
+            <SkeletonExchangeLine />
+          </SkeletonExchangeButton>
+          <SkeletonMessageButton />
+          {isMobile && <SkeletonMessageButtonSecond />}
+          {/* <SkeletonTitleAboveImage /> */}
+        </SkeletonOfferCardContainer>
+      )}
+    </SkeletonOfferCardsContainer>
   );
 };
 

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

@@ -6,6 +6,10 @@ import {
   ItemsTransition,
 } from "../../../Styles/globalStyleComponents";
 
+export const SkeletonOfferCardsContainer = styled(Box)`
+  display: flex;
+`;
+
 export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
   display: flex;
   flex-direction: row;
@@ -23,6 +27,7 @@ export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
   & * {
     border-radius: 4px;
   }
+
   @media (max-width: 550px) {
     height: 184px;
     padding: 18px;
@@ -35,6 +40,11 @@ export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
       margin: 0 18px;
     `}
   }
+  @media (max-width: 600px) {
+    width: 180px;
+    height: 373px;
+    margin-right: 18px;
+  }
 `;
 export const LeftPart = styled(Box)`
   display: flex;
@@ -42,8 +52,7 @@ export const LeftPart = styled(Box)`
   flex-direction: row;
   margin-right: 40px;
   @media (max-width: 600px) {
-    position: absolute;
-    bottom: 18px;
+    flex-direction: column;
   }
 `;
 export const SpreadLine = styled(Box)`
@@ -70,10 +79,6 @@ export const RightPart = styled(Box)`
 export const SkeletonImage = styled(ItemsTransition)`
   width: 144px;
   height: 144px;
-  @media (max-width: 600px) {
-    width: 108px;
-    height: 108px;
-  }
 `;
 export const SkeletonColumnContainer = styled(Box)`
   display: flex;
@@ -83,6 +88,9 @@ export const SkeletonColumnContainer = styled(Box)`
   flex-direction: column;
   @media (max-width: 600px) {
     max-height: 107px;
+    margin-left: 0;
+    margin-top: 9px;
+    flex: 0;
   }
 `;
 export const SkeletonTitle = styled(ItemsTransition)`
@@ -104,6 +112,11 @@ export const SkeletonAuthor = styled(ItemsTransition)`
 export const SkeletonLocation = styled(ItemsTransition)`
   width: 90px;
   height: 18px;
+
+  @media (max-width: 600px) {
+    width: 100px;
+    margin-top: 36px;
+  }
 `;
 export const SkeletonRowGroup = styled(Box)`
   display: flex;
@@ -118,6 +131,7 @@ export const SkeletonRowGroup = styled(Box)`
     & div:nth-child(1) {
       display: block;
       width: 85px;
+      margin-top: 4px;
       ${(props) => props.aboveChat && `margin-bottom: 18px;`}
     }
     & div:nth-child(2) {
@@ -129,6 +143,10 @@ export const SkeletonDetail = styled(ItemsTransition)`
   width: 72px;
   height: 14px;
   background-color: ${selectedTheme.colors.filterSkeletonItems};
+
+  @media (max-width: 600px) {
+    margin-top: 32px;
+  }
 `;
 export const SkeletonDescription = styled(ItemsTransition)`
   width: 72px;
@@ -151,6 +169,23 @@ export const SkeletonMessageButton = styled(ItemsTransition)`
   @media (max-width: 600px) {
     width: 32px;
     height: 32px;
+    top: 323px;
+    left: 18px;
+  }
+`;
+export const SkeletonMessageButtonSecond = styled(ItemsTransition)`
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+    top: 323px;
+    left: 59px;
   }
 `;
 export const SkeletonExchangeButton = styled(ItemsTransition)`

src/components/Cards/ProfileCard/SkeletonProfileCard/SkeletonProfileCard.js

@@ -16,6 +16,8 @@ import {
   SkeletonProfileCardHeader,
   SkeletonProfileCardLeftPart,
   SkeletonProfileCardLine,
+  SkeletonProfileCardLineSecond,
+  SkeletonProfileCardLineThird,
   SkeletonProfileCardLowerPart,
   SkeletonProfileCardSmallCircle,
   SkeletonProfileCardUpperPart,
@@ -38,8 +40,8 @@ const SkeletonProfileCard = () => {
         </SkeletonProfileCardUpperPart>
         <SkeletonProfileCardLowerPart>
           <SkeletonProfileCardLine />
-          <SkeletonProfileCardLine />
-          <SkeletonProfileCardLine />
+          <SkeletonProfileCardLineSecond />
+          <SkeletonProfileCardLineThird />
         </SkeletonProfileCardLowerPart>
         <SkeletonProfileCardFooter>
           <SkeletonProfileCardGroup>

src/components/Cards/ProfileCard/SkeletonProfileCard/SkeletonProfileCard.styled.js

@@ -40,6 +40,9 @@ export const SkeletonProfileCardContainer = styled(Box)`
   gap: 18px;
   margin: 0 50px;
   margin-top: 20px;
+  @media (max-width: 600px) {
+    margin-right: 18px !important;
+  }
   @media (max-width: 1200px) {
     margin-left: 0;
     margin-right: 36px;
@@ -48,6 +51,11 @@ export const SkeletonProfileCardContainer = styled(Box)`
 export const SkeletonProfileCardHeader = styled(SkeletonItemBackgroundColor)`
   width: 148px;
   height: 18px;
+
+  @media (max-width: 600px) {
+    width: 72px;
+    height: 18px;
+  }
 `;
 export const SkeletonProfileCardContent = styled(SkeletonBackgroundColor)`
   height: 347px;
@@ -56,6 +64,10 @@ export const SkeletonProfileCardContent = styled(SkeletonBackgroundColor)`
   flex-direction: column;
   gap: 39px;
   position: relative;
+
+  @media (max-width: 600px) {
+    gap: 18px;
+  }
 `;
 export const SkeletonProfileCardUpperPart = styled(Box)`
   display: flex;
@@ -74,23 +86,41 @@ export const SkeletonProfileCardBigCircle = styled(SkeletonItemBackgroundColor)`
   width: 144px;
   height: 144px;
   border-radius: 100%;
+
+  @media (max-width: 600px) {
+    width: 90px;
+    height: 90px;
+  }
 `;
 export const SkeletonProfileCardCircleLines = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 18px;
+
+  @media (max-width: 600px) {
+    gap: 9px;
+  }
 `;
 export const SkeletonProfileCardCircleLineOne = styled(
   SkeletonItemBackgroundColor
 )`
   width: 90px;
   height: 27px;
+
+  @media (max-width: 600px) {
+    height: 20px;
+  }
 `;
 export const SkeletonProfileCardCircleLineSecond = styled(
   SkeletonItemBackgroundColor
 )`
   width: 117px;
   height: 18px;
+
+  @media (max-width: 600px) {
+    width: 139px;
+    height: 14px;
+  }
 `;
 export const SkeletonProfileCardSmallCircle = styled(
   SkeletonItemBackgroundColor
@@ -98,16 +128,51 @@ export const SkeletonProfileCardSmallCircle = styled(
   width: 40px;
   height: 40px;
   border-radius: 100%;
+
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
 `;
 export const SkeletonProfileCardLowerPart = styled(Box)`
   display: flex;
   flex-direction: row;
   gap: 27px;
   padding-left: 18px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 18px;
+  }
 `;
 export const SkeletonProfileCardLine = styled(SkeletonItemBackgroundColor)`
   width: 108px;
   height: 18px;
+
+  @media (max-width: 600px) {
+    width: 84px;
+    height: 14px;
+  }
+`;
+export const SkeletonProfileCardLineSecond = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 108px;
+  height: 18px;
+
+  @media (max-width: 600px) {
+    width: 116px;
+    height: 14px;
+  }
+`;
+export const SkeletonProfileCardLineThird = styled(SkeletonItemBackgroundColor)`
+  width: 108px;
+  height: 18px;
+
+  @media (max-width: 600px) {
+    width: 106px;
+    height: 14px;
+  }
 `;
 export const SkeletonProfileCardFooter = styled(SkeletonItemBackgroundColor)`
   width: 100%;
@@ -119,32 +184,63 @@ export const SkeletonProfileCardFooter = styled(SkeletonItemBackgroundColor)`
   justify-content: flex-start;
   gap: 36px;
   padding-left: 18px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    height: 127px;
+    gap: 12px;
+  }
 `;
 export const SkeletonProfileCardGroup = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 20px;
+
+  @media (max-width: 600px) {
+    margin-top: 0;
+  }
 `;
 export const SkeletonProfileCardFooterLineOne = styled(SkeletonBackgroundColor)`
   height: 18px;
   width: 107px;
+
+  @media (max-width: 600px) {
+    margin-top: 18px;
+    height: 14px;
+    width: 49px;
+  }
 `;
 export const SkeletonProfileCardFooterLineSecond = styled(
   SkeletonBackgroundColor
 )`
   height: 18px;
   width: 144px;
+
+  @media (max-width: 600px) {
+    height: 14px;
+    width: 134px;
+  }
 `;
 export const SkeletonProfileCardFooterLineThird = styled(
   SkeletonBackgroundColor
 )`
   height: 18px;
   width: 197px;
+
+  @media (max-width: 600px) {
+    height: 14px;
+    width: 141px;
+  }
 `;
 export const SkeletonProfileCardFooterLineForth = styled(
   SkeletonBackgroundColor
 )`
   height: 18px;
   width: 144px;
+
+  @media (max-width: 600px) {
+    height: 14px;
+    width: 160px;
+  }
 `;

src/components/ItemDetails/SkeletonItemDetails/SkeletonItemDetails.js

@@ -1,11 +1,15 @@
 import React from "react";
+import useIsMobile from "../../../hooks/useIsMobile";
 import {
   SkeletonItemDetailsContainer,
   SkeletonItemDetailsHeader,
   SkeletonItemDetailsContent,
   SkeletonItemDetailsLineContainer,
   SkeletonItemDetailsLineSmallContainer,
-  SkeletonItemDetailsLineSmall,
+  SkeletonItemDetailsLineSmallFirst,
+  SkeletonItemDetailsLineSmallSecond,
+  SkeletonItemDetailsLineSmallThird,
+  SkeletonItemDetailsLineSmallFourth,
   SkeletonItemDetailsLineBig,
   SkeletonItemDetailsGalleryMainContainer,
   SkeletonItemDetailsGallery,
@@ -23,22 +27,36 @@ import {
   SkeletonItemDetailsMainFifthLine,
   SkeletonItemDetailsMainSixthLine,
   SkeletonItemDetailsMainButtons,
-  SkeletonItemDetailsMainButtonRound,
+  SkeletonItemDetailsMainButtonRoundFirst,
+  SkeletonItemDetailsMainButtonRoundSecond,
   SkeletonItemDetailsMainButtonContainer,
   SkeletonItemDetailsMainButton,
+  SkeletonItemDetailsMainDescription,
+  SkeletonItemDetailsMainSeventhLine,
+  SkeletonItemDetailsMainEighthLine,
+  SkeletonItemDetailsMainNinethLine,
+  SkeletonItemDetailsMainTenthLine,
+  SkeletonItemDetailsMainEleventhLine,
+  SkeletonItemDetailsMainTwelfthLine,
+  SkeletonItemDetailsMainThirteenthLine,
+  SkeletonItemDetailsMainFourteenthLine,
+  SkeletonItemDetailsMainMobileButtonLinesCont,
+  SkeletonItemDetailsMainMobileButtonFirstLine,
+  SkeletonItemDetailsMainMobileButtonSecondLine,
 } from "./SkeletonItemDetails.styled";
 
 const SkeletonItemDetails = () => {
+  const { isMobile } = useIsMobile();
   return (
     <SkeletonItemDetailsContainer>
       <SkeletonItemDetailsHeader />
       <SkeletonItemDetailsContent>
         <SkeletonItemDetailsLineContainer>
           <SkeletonItemDetailsLineSmallContainer>
-            <SkeletonItemDetailsLineSmall />
-            <SkeletonItemDetailsLineSmall />
-            <SkeletonItemDetailsLineSmall />
-            <SkeletonItemDetailsLineSmall />
+            <SkeletonItemDetailsLineSmallFirst />
+            <SkeletonItemDetailsLineSmallSecond />
+            <SkeletonItemDetailsLineSmallThird />
+            <SkeletonItemDetailsLineSmallFourth />
           </SkeletonItemDetailsLineSmallContainer>
           <SkeletonItemDetailsLineBig />
         </SkeletonItemDetailsLineContainer>
@@ -46,34 +64,49 @@ const SkeletonItemDetails = () => {
           <SkeletonItemDetailsGallery>
             <SkeletonItemDetailsArrow />
             <SkeletonItemDetailsImagesContainer>
-              <SkeletonItemDetailsImage />
-              <SkeletonItemDetailsImage />
-              <SkeletonItemDetailsImage />
-              <SkeletonItemDetailsImageHalf />
+              {isMobile ? (
+                <>
+                  <SkeletonItemDetailsImage />
+                  <SkeletonItemDetailsImageHalf />
+                </>
+              ) : (
+                <>
+                  <SkeletonItemDetailsImage />
+                  <SkeletonItemDetailsImage />
+                  <SkeletonItemDetailsImage />
+                  <SkeletonItemDetailsImageHalf />
+                </>
+              )}
             </SkeletonItemDetailsImagesContainer>
             <SkeletonItemDetailsArrow />
           </SkeletonItemDetailsGallery>
           <SkeletonItemDetailsMainContainer>
             <SkeletonItemDetailsMainFirstLine />
-            <SkeletonItemDetailsLineSmall />
+            <SkeletonItemDetailsMainDescription />
             <SkeletonItemDetailsMainMarginS />
             <SkeletonItemDetailsMainSecondLine />
             <SkeletonItemDetailsMainThirdLine />
             <SkeletonItemDetailsMainFourthLine />
             <SkeletonItemDetailsMainMarginL />
-            <SkeletonItemDetailsMainSecondLine />
-            <SkeletonItemDetailsMainFourthLine />
-            <SkeletonItemDetailsMainThirdLine />
-            <SkeletonItemDetailsMainFourthLine />
             <SkeletonItemDetailsMainFifthLine />
-            <SkeletonItemDetailsMainSecondLine />
-            <SkeletonItemDetailsMainThirdLine />
-            <SkeletonItemDetailsMainFifthLine />
-            <SkeletonItemDetailsMainFourthLine />
             <SkeletonItemDetailsMainSixthLine />
+            <SkeletonItemDetailsMainSeventhLine />
+            <SkeletonItemDetailsMainEighthLine />
+            <SkeletonItemDetailsMainNinethLine />
+            <SkeletonItemDetailsMainTenthLine />
+            <SkeletonItemDetailsMainEleventhLine />
+            <SkeletonItemDetailsMainTwelfthLine />
+            <SkeletonItemDetailsMainThirteenthLine />
+            <SkeletonItemDetailsMainFourteenthLine />
             <SkeletonItemDetailsMainButtons>
-              <SkeletonItemDetailsMainButtonRound />
-              <SkeletonItemDetailsMainButtonRound />
+              <SkeletonItemDetailsMainButtonRoundFirst />
+              <SkeletonItemDetailsMainButtonRoundSecond />
+              {isMobile && (
+                <SkeletonItemDetailsMainMobileButtonLinesCont>
+                  <SkeletonItemDetailsMainMobileButtonFirstLine />
+                  <SkeletonItemDetailsMainMobileButtonSecondLine />
+                </SkeletonItemDetailsMainMobileButtonLinesCont>
+              )}
               <SkeletonItemDetailsMainButtonContainer>
                 <SkeletonItemDetailsMainButton />
               </SkeletonItemDetailsMainButtonContainer>

src/components/ItemDetails/SkeletonItemDetails/SkeletonItemDetails.styled.js

@@ -42,7 +42,7 @@ export const SkeletonItemDetailsContainer = styled(Box)`
   }
 
   @media (max-width: 600px) {
-    display: none;
+    margin-top: 180px;
   }
 `;
 
@@ -53,6 +53,10 @@ export const SkeletonItemDetailsHeader = styled(Box)`
   margin-bottom: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 72px;
+  }
 `;
 
 export const SkeletonItemDetailsContent = styled(Box)`
@@ -75,12 +79,52 @@ export const SkeletonItemDetailsLineSmallContainer = styled(Box)`
   gap: 27px;
 `;
 
-export const SkeletonItemDetailsLineSmall = styled(Box)`
+export const SkeletonItemDetailsLineSmallFirst = styled(Box)`
+  width: 72px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 78px;
+  }
+`;
+
+export const SkeletonItemDetailsLineSmallSecond = styled(Box)`
+  width: 72px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 49px;
+  }
+`;
+
+export const SkeletonItemDetailsLineSmallThird = styled(Box)`
   width: 72px;
   height: 14px;
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 49px;
+  }
+`;
+
+export const SkeletonItemDetailsLineSmallFourth = styled(Box)`
+  width: 72px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 39px;
+  }
 `;
 
 export const SkeletonItemDetailsLineBig = styled(Box)`
@@ -89,10 +133,19 @@ export const SkeletonItemDetailsLineBig = styled(Box)`
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const SkeletonItemDetailsGalleryMainContainer = styled(Box)`
   display: flex;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    margin-top: 60px;
+  }
 `;
 
 export const SkeletonItemDetailsGallery = styled(Box)`
@@ -100,6 +153,11 @@ export const SkeletonItemDetailsGallery = styled(Box)`
   flex-direction: column;
   align-items: center;
   gap: 18px;
+
+  @media (max-width: 600px) {
+    flex-direction: row;
+    gap: 0;
+  }
 `;
 
 export const SkeletonItemDetailsArrow = styled(Box)`
@@ -108,11 +166,20 @@ export const SkeletonItemDetailsArrow = styled(Box)`
   border-radius: 100%;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 30px;
+    height: 30px;
+  }
 `;
 
 export const SkeletonItemDetailsImagesContainer = styled(Box)`
   display: flex;
   flex-direction: column;
+
+  @media (max-width: 600px) {
+    flex-direction: row;
+  }
 `;
 
 export const SkeletonItemDetailsImage = styled(Box)`
@@ -122,6 +189,11 @@ export const SkeletonItemDetailsImage = styled(Box)`
   margin-bottom: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    margin-left: 9px;
+    margin-bottom: 0;
+  }
 `;
 
 export const SkeletonItemDetailsImageHalf = styled(Box)`
@@ -130,6 +202,12 @@ export const SkeletonItemDetailsImageHalf = styled(Box)`
   border-radius: 4px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    transform: rotate(90deg);
+    margin-top: 28px;
+    margin-left: -15px;
+  }
 `;
 
 export const SkeletonItemDetailsMainContainer = styled(Box)`
@@ -137,6 +215,10 @@ export const SkeletonItemDetailsMainContainer = styled(Box)`
   flex-direction: column;
   margin-left: 20px;
   width: 100%;
+
+  @media (max-width: 600px) {
+    margin-left: 0;
+  }
 `;
 
 export const SkeletonItemDetailsMainMarginS = styled(Box)`
@@ -145,6 +227,10 @@ export const SkeletonItemDetailsMainMarginS = styled(Box)`
 
 export const SkeletonItemDetailsMainMarginL = styled(Box)`
   margin-bottom: 30px;
+
+  @media (max-width: 600px) {
+    margin-bottom: 3px;
+  }
 `;
 
 export const SkeletonItemDetailsMainFirstLine = styled(Box)`
@@ -154,6 +240,27 @@ export const SkeletonItemDetailsMainFirstLine = styled(Box)`
   margin-bottom: 15px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    position: absolute;
+    top: 370px;
+    left: 36px;
+    width: 123px;
+    height: 20px;
+  }
+`;
+
+export const SkeletonItemDetailsMainDescription = styled(Box)`
+  width: 72px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 26px;
+    margin-top: 17px;
+  }
 `;
 
 export const SkeletonItemDetailsMainSecondLine = styled(Box)`
@@ -167,6 +274,9 @@ export const SkeletonItemDetailsMainSecondLine = styled(Box)`
   @media (max-width: 1200px) {
     width: 370px;
   }
+  @media (max-width: 600px) {
+    width: 232px;
+  }
 `;
 
 export const SkeletonItemDetailsMainThirdLine = styled(Box)`
@@ -180,6 +290,9 @@ export const SkeletonItemDetailsMainThirdLine = styled(Box)`
   @media (max-width: 1200px) {
     width: 350px;
   }
+  @media (max-width: 600px) {
+    width: 271px;
+  }
 `;
 
 export const SkeletonItemDetailsMainFourthLine = styled(Box)`
@@ -193,10 +306,13 @@ export const SkeletonItemDetailsMainFourthLine = styled(Box)`
   @media (max-width: 1200px) {
     width: 365px;
   }
+  @media (max-width: 600px) {
+    width: 146px;
+  }
 `;
 
 export const SkeletonItemDetailsMainFifthLine = styled(Box)`
-  width: 441px;
+  width: 449px;
   height: 18px;
   border-radius: 2px;
   margin-bottom: 4px;
@@ -206,17 +322,154 @@ export const SkeletonItemDetailsMainFifthLine = styled(Box)`
   @media (max-width: 1200px) {
     width: 361px;
   }
+  @media (max-width: 600px) {
+    width: 271px;
+  }
 `;
 
 export const SkeletonItemDetailsMainSixthLine = styled(Box)`
-  width: 307px;
+  width: 445px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 340px;
+  }
+  @media (max-width: 600px) {
+    width: 296px;
+  }
+`;
+
+export const SkeletonItemDetailsMainSeventhLine = styled(Box)`
+  width: 427px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 320px;
+  }
+  @media (max-width: 600px) {
+    width: 160px;
+  }
+`;
+
+export const SkeletonItemDetailsMainEighthLine = styled(Box)`
+  width: 445px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 340px;
+  }
+  @media (max-width: 600px) {
+    width: 192px;
+  }
+`;
+
+export const SkeletonItemDetailsMainNinethLine = styled(Box)`
+  width: 449px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 335px;
+  }
+  @media (max-width: 600px) {
+    width: 249px;
+  }
+`;
+
+export const SkeletonItemDetailsMainTenthLine = styled(Box)`
+  width: 449px;
   height: 18px;
   border-radius: 2px;
+  margin-bottom: 4px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
-    width: 227px;
+    width: 345px;
+  }
+
+  @media (max-width: 600px) {
+    width: 237px;
+    margin-bottom: 18px;
+  }
+`;
+
+export const SkeletonItemDetailsMainEleventhLine = styled(Box)`
+  width: 427px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 350px;
+  }
+
+  @media (max-width: 600px) {
+    width: 274px;
+  }
+`;
+
+export const SkeletonItemDetailsMainTwelfthLine = styled(Box)`
+  width: 449px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 342px;
+  }
+
+  @media (max-width: 600px) {
+    width: 288px;
+  }
+`;
+
+export const SkeletonItemDetailsMainThirteenthLine = styled(Box)`
+  width: 445px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 1200px) {
+    width: 352px;
+  }
+
+  @media (max-width: 600px) {
+    width: 283px;
+  }
+`;
+
+export const SkeletonItemDetailsMainFourteenthLine = styled(Box)`
+  width: 307px;
+  height: 18px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    display: none;
   }
 `;
 
@@ -225,15 +478,44 @@ export const SkeletonItemDetailsMainButtons = styled(Box)`
   align-items: center;
   margin-top: 268px;
   margin-left: auto;
+
+  @media (max-width: 600px) {
+    margin-top: 35px;
+  }
+`;
+
+export const SkeletonItemDetailsMainButtonRoundFirst = styled(Box)`
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  margin-right: 18px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    right: 59px;
+    top: 363px;
+  }
 `;
 
-export const SkeletonItemDetailsMainButtonRound = styled(Box)`
+export const SkeletonItemDetailsMainButtonRoundSecond = styled(Box)`
   width: 40px;
   height: 40px;
   border-radius: 100%;
   margin-right: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    right: 18px;
+    top: 363px;
+  }
 `;
 
 export const SkeletonItemDetailsMainButton = styled(Box)`
@@ -241,7 +523,7 @@ export const SkeletonItemDetailsMainButton = styled(Box)`
   height: 14px;
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+  animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
 export const SkeletonItemDetailsMainButtonContainer = styled(Box)`
@@ -250,3 +532,25 @@ export const SkeletonItemDetailsMainButtonContainer = styled(Box)`
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
+
+export const SkeletonItemDetailsMainMobileButtonLinesCont = styled(Box)`
+  position: absolute;
+  left: 36px;
+`;
+
+export const SkeletonItemDetailsMainMobileButtonFirstLine = styled(Box)`
+  width: 53px;
+  height: 14px;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+`;
+
+export const SkeletonItemDetailsMainMobileButtonSecondLine = styled(Box)`
+  width: 67px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  animation: ${skeletonAnimation} 2s infinite;
+`;

src/components/Profile/ProfileOffers/ProfileOffers.js

@@ -82,39 +82,44 @@ const ProfileOffers = (props) => {
           <SearchBar handleSearch={handleSearch} />
         </>
       )}
-      <OffersContainer>
-        {!isMobile ? (
-          isLoadingMineOffers || isLoadingMineOffers === undefined ? (
-            arrayForMapping.map((item, index) => (
-              <SkeletonOfferCard key={index} />
-            ))
-          ) : offersToShow.length !== 0 ? (
-            offersToShow.map((item) => (
-              <OfferCard
-                isMyOffer={props.isMyProfile}
-                offer={item}
-                key={JSON.stringify(item)}
-                messageUser={messageUser}
-              />
-            ))
+
+      {isLoadingMineOffers || isLoadingMineOffers === undefined ? (
+        <SkeletonOfferCard />
+      ) : (
+        <OffersContainer>
+          {!isMobile ? (
+            isLoadingMineOffers || isLoadingMineOffers === undefined ? (
+              arrayForMapping.map((item, index) => (
+                <SkeletonOfferCard key={index} />
+              ))
+            ) : offersToShow.length !== 0 ? (
+              offersToShow.map((item) => (
+                <OfferCard
+                  isMyOffer={props.isMyProfile}
+                  offer={item}
+                  key={JSON.stringify(item)}
+                  messageUser={messageUser}
+                />
+              ))
+            ) : (
+              <NoProfileOffers />
+            )
           ) : (
-            <NoProfileOffers />
-          )
-        ) : (
-          <OffersScroller hideArrows>
-            {offersToShow.map((item) => (
-              <OfferCard
-                vertical
-                isMyOffer={props.isMyProfile}
-                offer={item}
-                key={JSON.stringify(item)}
-                pinned
-                messageUser={messageUser}
-              />
-            ))}
-          </OffersScroller>
-        )}
-      </OffersContainer>
+            <OffersScroller hideArrows>
+              {offersToShow.map((item) => (
+                <OfferCard
+                  vertical
+                  isMyOffer={props.isMyProfile}
+                  offer={item}
+                  key={JSON.stringify(item)}
+                  pinned
+                  messageUser={messageUser}
+                />
+              ))}
+            </OffersScroller>
+          )}
+        </OffersContainer>
+      )}
     </ProfileOffersContainer>
   );
 };

src/components/ProfileMini/SkeletonProfileMini/SkeletonProfileMini.styled.js

@@ -43,6 +43,10 @@ export const SkeletonProfileMiniHeader = styled(Box)`
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 72px;
+  }
 `;
 
 export const SkeletonProfileMiniContent = styled(Box)`
@@ -65,6 +69,11 @@ export const SkeletonProfileMiniImage = styled(Box)`
   border-radius: 100%;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 90px;
+    height: 90px;
+  }
 `;
 
 export const SkeletonProfileMiniColumn = styled(Box)`
@@ -79,6 +88,10 @@ export const SkeletonProfileMiniFirstRow = styled(Box)`
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    height: 20px;
+  }
 `;
 
 export const SkeletonProfileMiniSecondRow = styled(Box)`
@@ -88,6 +101,12 @@ export const SkeletonProfileMiniSecondRow = styled(Box)`
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 136px;
+    height: 14px;
+    margin-top: 9px;
+  }
 `;
 
 export const SkeletonProfileMiniThirdRow = styled(Box)`
@@ -96,6 +115,10 @@ export const SkeletonProfileMiniThirdRow = styled(Box)`
   border-radius: 2px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const SkeletonProfileMiniImageSmall = styled(Box)`
@@ -104,4 +127,9 @@ export const SkeletonProfileMiniImageSmall = styled(Box)`
   border-radius: 100%;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
+
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
 `;

src/i18n/resources/rs.js

@@ -74,7 +74,7 @@ export default {
     descriptionNoOfCharsError: "Opis mora imati najmanje 8 karaktera!",
     locationError: "Unesite ispravnu lokaciju!",
     categoryError: "Kategorija je obavezna!",
-    subcategoryError: "Podkategorija je obavezna!"
+    subcategoryError: "Podkategorija je obavezna!",
   },
   password: {
     weak: "slaba",