Get rid of layout shift on item page

Author: Nightlngale

packages/frontend/components/header/component.tsx

@@ -80,7 +80,7 @@ export const Header = () => {
       <header css={styles.header}>
         <Container cssExtend={styles.headerInner}>
           <Flex align="center">
-            <Link href={Routes.DEFAULT}>
+            <Link prefetch={false} href={Routes.DEFAULT}>
               <a>
                 <Logo />
               </a>

packages/frontend/components/item/component.tsx

@@ -2,17 +2,11 @@
 import type { ItemDto } from '@vse-bude/shared';
 import { ProductType } from '@vse-bude/shared';
 import { Container } from '@primitives';
-import { lightTheme } from 'theme';
 import {
   deleteProductFromFavorites,
   addProductToFavorites,
 } from 'store/favorite-product';
-import {
-  useAppDispatch,
-  useWindowSize,
-  useInFavorite,
-  useTypedSelector,
-} from '@hooks';
+import { useAppDispatch, useInFavorite, useTypedSelector } from '@hooks';
 import { fetchCreateOrder } from 'store/checkout';
 import { useRouter } from 'next/router';
 import { Routes } from '@enums';
@@ -27,8 +21,6 @@ interface ItemProps {
 }
 
 export const Item = ({ item }: ItemProps) => {
-  const windowSize = useWindowSize();
-
   const dispatch = useAppDispatch();
 
   const router = useRouter();
@@ -57,11 +49,12 @@ export const Item = ({ item }: ItemProps) => {
   return (
     <React.Fragment>
       <Container cssExtend={styles.itemWrapper}>
-        {windowSize.width > lightTheme.breakpoints.sm ? (
+        <div className="desktop-gallery-wrapper">
           <ItemImageSlider imageLinks={item.imageLinks} />
-        ) : (
+        </div>
+        <div className="mobile-gallery-wrapper">
           <ImageSliderSplide imageLinks={item.imageLinks} />
-        )}
+        </div>
         {item.type === ProductType.SELLING ? (
           <ItemInfoSelling
             item={item}

packages/frontend/components/item/image-slider-splide/component.tsx

@@ -23,6 +23,7 @@ const ImageSliderSplide = ({ imageLinks }: ImageSliderSplideProps) => (
               key={link + index}
               layout="fill"
               objectFit="cover"
+              priority={index < 4}
             />
             <span css={styles.numberSlide}>
               <span css={styles.current}>{index + 1}</span>/

packages/frontend/components/item/image-slider/component.tsx

@@ -25,6 +25,7 @@ export const ItemImageSlider = ({ imageLinks }: ItemImageSliderProps) => {
               key={index}
               onClick={() => handleClick(index)}
               src={link}
+              priority={index < 4}
               alt="item image"
               layout="fill"
               objectFit="cover"

packages/frontend/components/item/item-info-auction/component.tsx

@@ -17,7 +17,7 @@ import {
 } from 'store/product';
 import { UPDATE_PRODUCT_PRICE } from '@vse-bude/shared';
 import { getAuctionItemIo } from '@helpers';
-import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { CountDownTimer } from '../countdown-timer/component';
 import { ItemTitle, ItemInfo, ItemPrice } from '../item-info';
 import { minBidValidation } from '../validation';
@@ -40,7 +40,7 @@ export const ItemInfoAuction = ({
   onChangeIsFavorite,
 }: ItemInfoAuctionProps) => {
   const [confirmModalVisible, setModalVisible] = useState(false);
-
+  const { push } = useRouter();
   const { t } = useTranslation('item');
   const { user } = useTypedSelector((state) => state.auth);
 
@@ -114,11 +114,7 @@ export const ItemInfoAuction = ({
   };
 
   const renderEditButton = () => (
-    <Link href={`/items/edit/${item.id}`}>
-      <a style={{ textDecoration: 'none' }}>
-        <Button>Edit</Button>
-      </a>
-    </Link>
+    <Button onClick={() => push(`/items/edit/${item.id}`)}>Edit</Button>
   );
 
   const renderBidButtons = () => (

packages/frontend/components/item/item-info/seller-info/component.tsx

@@ -37,7 +37,7 @@ export const SellerInfo = ({ seller, onContactSeller }: SellerInfoProps) => {
           image={seller.avatar}
           handleClick={handleAvatarClick}
         />
-        <Link href={`${Routes.PROFILE}/${seller.id}`} passHref>
+        <Link prefetch={false} href={`${Routes.PROFILE}/${seller.id}`} passHref>
           <span>{seller.firstName + ' ' + seller.lastName}</span>
         </Link>
       </div>

packages/frontend/components/item/styles.ts

@@ -4,9 +4,27 @@ import { css } from '@emotion/react';
 export const itemWrapper = ({ spaces, breakpoints }: Theme) => css`
   display: flex;
   margin-bottom: ${spaces.xl11};
+
+  .desktop-gallery-wrapper,
+  .mobile-gallery-wrapper {
+    display: contents;
+  }
+
   @media (max-width: ${breakpoints.xl}px) {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
+
+  @media (max-width: ${breakpoints.sm}px) {
+    .desktop-gallery-wrapper {
+      display: none;
+      }
+    }
+
+  @media (min-width: ${breakpoints.sm + 1}px) {
+    .mobile-gallery-wrapper {
+      display: none;
+    }
+  }
 `;

packages/frontend/components/primitives/modal/component.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import * as styles from './styles';
 import type { ModalProps } from './types';
 
@@ -23,7 +23,7 @@ export const Modal = ({ visible, children }: ModalProps) => {
   );
 
   const renderPortal = () =>
-    ReactDOM.createPortal(renderPortalBody(), document.querySelector('#modal'));
+    createPortal(renderPortalBody(), document.querySelector('#modal'));
 
   return <React.Fragment>{visible && renderPortal()}</React.Fragment>;
 };

packages/frontend/components/primitives/popover/component.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { resetButton } from 'theme';
 import { useOutsideClick } from '@hooks';
 import type { PopoverProps } from './types';
@@ -92,10 +92,7 @@ export const Popover = ({
   );
 
   const renderPortal = () =>
-    ReactDOM.createPortal(
-      renderPortalBody(),
-      document.querySelector('#popover'),
-    );
+    createPortal(renderPortalBody(), document.querySelector('#popover'));
 
   return (
     <React.Fragment>

packages/frontend/components/primitives/tooltip/component.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useRef, useEffect, useState, useCallback } from 'react';
-import * as ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import * as styles from './styles';
 import type { TooltipProps } from './types';
 
@@ -103,10 +103,7 @@ export const Tooltip = ({
   );
 
   const renderPortal = () =>
-    ReactDOM.createPortal(
-      renderPortalBody(),
-      document.querySelector('#portal'),
-    );
+    createPortal(renderPortalBody(), document.querySelector('#portal'));
 
   return (
     <Fragment>

packages/frontend/pages/_document.tsx

@@ -44,10 +44,10 @@ class CustomDocument extends Document {
         </Head>
         <body>
           <Main />
+          <div id="portal" />
+          <div id="popover" />
+          <div id="modal" />
           <NextScript />
-          <div id="portal"></div>
-          <div id="popover"></div>
-          <div id="modal"></div>
         </body>
       </Html>
     );

packages/frontend/providers/ThemeProvider/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { useState, useInsertionEffect } from 'react';
+import { useState } from 'react';
 import { Global, ThemeProvider as ThemeProviderEmotion } from '@emotion/react';
 import { darkTheme, lightTheme, globalStyles } from 'theme';
 
@@ -15,10 +15,6 @@ const colorSchemes = {
 const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const [theme] = useState(colorSchemes['light']);
 
-  useInsertionEffect(() => {
-    document.body.style.opacity = '1';
-  }, []);
-
   return (
     <ThemeProviderEmotion theme={theme}>
       <Global styles={globalStyles} />

packages/frontend/public/images/favicon/site.webmanifest

@@ -5,12 +5,12 @@
   "scope": "/",
   "icons": [
     {
-      "src": "images/favicon/android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/images/favicon/android-chrome-512x512.png",
+      "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

packages/frontend/public/images/flagBg.png

@@ -21,10 +21,6 @@ export const globalStyles = (theme: Theme) => css`
     min-height: 100vh;
   }
 
-  body {
-    opacity: 0;
-  }
-
   body,
   ul,
   li {