Merge branch 'develop' into staging

package.json

@@ -7,9 +7,9 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/node": "^17.0.22",
+    "@types/react": "^17.0.41",
+    "@types/react-dom": "^17.0.14",
     "classnames": "^2.3.1",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
@@ -88,14 +88,14 @@
     "@svgr/rollup": "^6.2.1",
     "@types/react-color": "3.0.6",
     "@types/react-slick": "^0.23.8",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "autoprefixer": "^10.4.4",
+    "babel-loader": "^8.2.4",
     "css-loader": "^6.7.1",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.2",
+    "eslint-config-airbnb-typescript": "^16.1.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
@@ -104,11 +104,11 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.5.7",
     "fs-extra": "^10.0.1",
-    "postcss": "^8.4.8",
+    "postcss": "^8.4.12",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-sorting": "^7.0.1",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -122,7 +122,7 @@
     "semantic-release": "^19.0.2",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.5.3",
+    "stylelint": "^14.6.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard-scss": "^3.0.0",
     "webpack": "^5.70.0"

src/components/atoms/CelebritiesItem/CelebritiesItem.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import './CelebritiesItem.scss';
+import placeholder from '../../../assets/images/placeholder.svg';
 
 export type CelebritiesItemProps = {
   img: string;
@@ -32,7 +33,14 @@ const Item: FC<CelebritiesItemProps> = ({
     {!lazySwiper && (
       <img src={img} alt={name} loading={lazy ? 'lazy' : undefined} />
     )}
-    {lazySwiper && <img alt={name} data-src={img} className="swiper-lazy" />}
+    {lazySwiper && (
+      <img
+        alt={name}
+        data-src={img}
+        src={placeholder}
+        className="swiper-lazy"
+      />
+    )}
     <div>
       <div className="celeb__info">
         <h4>{name}</h4>

src/components/atoms/TeamCard/TeamCard.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FC } from 'react';
 import './TeamCard.scss';
+import placeholder from '../../../assets/images/placeholder.svg';
 
 export type TeamCardProps = {
   img: string;
@@ -35,7 +36,14 @@ export const TeamCard: FC<TeamCardProps> = ({
     {!lazySwiper && (
       <img src={img} alt={name} loading={lazy ? 'lazy' : undefined} />
     )}
-    {lazySwiper && <img data-src={img} className="swiper-lazy" alt={name} />}
+    {lazySwiper && (
+      <img
+        data-src={img}
+        src={placeholder}
+        className="swiper-lazy"
+        alt={name}
+      />
+    )}
     <p>{name}</p>
     <span>
       {link && (

src/components/molecules/CelebritiesList/CelebritiesList.scss

@@ -1,5 +1,7 @@
 @use '../../../assets/styles/utils' as u;
 
+$swiper-loading-color: var(--color-base);
+
 .celebrities {
   &__list {
     display: flex;
@@ -49,6 +51,8 @@
     }
 
     .swiper {
+      --swiper-preloader-color: $swiper-loading-color;
+
       &-prev-celebritiesList {
         @extend %swiper;
 

src/components/molecules/CelebritiesList/CelebritiesList.tsx

@@ -57,9 +57,7 @@ export const CelebritiesList: FC<CelebritiesListProps> = ({
               category={item.category}
               lazySwiper={options?.lazy !== undefined}
             />
-            {options?.lazy && (
-              <div className="swiper-lazy-preloader swiper-lazy-preloader-white" />
-            )}
+            {options?.lazy && <div className="swiper-lazy-preloader" />}
           </SwiperSlide>
         ))}
       </Swiper>

src/components/molecules/TeamList/TeamList.scss

@@ -1,3 +1,5 @@
+$swiper-loading-color: var(--light-bg);
+
 .team-list {
   margin: 0 auto;
   position: relative;
@@ -46,6 +48,8 @@
   }
 
   .swiper {
+    --swiper-preloader-color: #{$swiper-loading-color};
+
     &-slide {
       width: auto;
     }

src/components/molecules/TeamList/TeamList.stories.tsx

@@ -17,6 +17,7 @@ const Template: Story<TeamListProps> = (args) => {
         {...args}
         options={{
           onReachEnd: () => setShowButton(true),
+          lazy: true,
         }}
       />
       {showButton && <Button>Join Team</Button>}

src/components/molecules/TeamList/TeamList.tsx

@@ -63,9 +63,7 @@ export const TeamList: FC<TeamListProps> = ({
               centered={centered}
               lazySwiper={options?.lazy !== undefined}
             />
-            {options?.lazy && (
-              <div className="swiper-lazy-preloader swiper-lazy-preloader-white" />
-            )}
+            {options?.lazy && <div className="swiper-lazy-preloader" />}
           </SwiperSlide>
         ))}
       </Swiper>