large performance refactor

src/shared/components/image/image.tsx

@@ -1,5 +1,12 @@
 import clsx from 'clsx';
-import { ForwardedRef, forwardRef, HTMLAttributes, type ImgHTMLAttributes, ReactNode } from 'react';
+import {
+    ForwardedRef,
+    forwardRef,
+    HTMLAttributes,
+    type ImgHTMLAttributes,
+    memo,
+    ReactNode,
+} from 'react';
 import { Img } from 'react-image';
 
 import styles from './image.module.css';
@@ -34,10 +41,10 @@ interface ImageUnloaderProps {
 export const FALLBACK_SVG =
     'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
 
-export function Image({
+export function BaseImage({
     className,
     containerClassName,
-    enableAnimation,
+    enableAnimation = false,
     imageContainerProps,
     includeLoader = true,
     includeUnloader = true,
@@ -62,6 +69,8 @@ export function Image({
                         {children}
                     </ImageContainer>
                 )}
+                decoding="async"
+                fetchPriority={inViewport ? 'high' : 'low'}
                 loader={
                     includeLoader ? (
                         <ImageContainer className={containerClassName}>
@@ -69,6 +78,7 @@ export function Image({
                         </ImageContainer>
                     ) : null
                 }
+                loading={inViewport ? 'eager' : 'lazy'}
                 src={inViewport ? src : FALLBACK_SVG}
                 unloader={
                     includeUnloader ? (
@@ -89,6 +99,8 @@ export function Image({
     );
 }
 
+export const Image = memo(BaseImage);
+
 const ImageContainer = forwardRef(
     (
         { children, className, enableAnimation, ...props }: ImageContainerProps,

src/shared/components/skeleton/skeleton.tsx

@@ -1,6 +1,5 @@
-import type { CSSProperties } from 'react';
-
 import clsx from 'clsx';
+import { type CSSProperties, memo } from 'react';
 import RSkeleton from 'react-loading-skeleton';
 
 import styles from './skeleton.module.css';
@@ -22,7 +21,7 @@ interface SkeletonProps {
     width?: number | string;
 }
 
-export function Skeleton({
+export function BaseSkeleton({
     baseColor,
     borderRadius,
     className,
@@ -54,3 +53,7 @@ export function Skeleton({
         />
     );
 }
+
+export const Skeleton = memo(BaseSkeleton);
+
+Skeleton.displayName = 'Skeleton';