Fix lint issues and console errors and warnings

frontend-next-migration/src/app/[lng]/(helper)/collections/loading.tsx

@@ -1 +1,12 @@
-export { PageLoader as default } from '@/widgets/PageLoader';
+export default function Loading() {
+    return (
+        <div
+            role="status"
+            aria-busy="true"
+            aria-live="polite"
+            style={{ padding: '1rem' }}
+        >
+            Loading…
+        </div>
+    );
+}

frontend-next-migration/src/app/[lng]/(helper)/defense-gallery/[herogroup]/not-found.tsx

@@ -18,7 +18,10 @@ export default function NotFound() {
             }}
         >
             <h1>{t('not-found-title')}</h1>
-            <Link href={getRouteAllHeroesPage()}>
+            <Link
+                href={getRouteAllHeroesPage()}
+                prefetch={false}
+            >
                 <b>{t('not-found-check-heroes')}</b>
             </Link>
         </div>

frontend-next-migration/src/app/[lng]/(helper)/heroes/[slug]/not-found.tsx

@@ -18,7 +18,10 @@ export default function NotFound() {
             }}
         >
             <h1>{t('not-found-title')}</h1>
-            <Link href={getRouteAllHeroesPage()}>
+            <Link
+                href={getRouteAllHeroesPage()}
+                prefetch={false}
+            >
                 <b>{t('not-found-check-heroes')}</b>
             </Link>
         </div>

frontend-next-migration/src/app/[lng]/(helper)/heroes/loading.tsx

@@ -1 +1,16 @@
-export { PageLoader as default } from '@/widgets/PageLoader';
+export default function Loading() {
+    return (
+        <div
+            aria-live="polite"
+            aria-busy="true"
+            style={{
+                display: 'grid',
+                placeItems: 'center',
+                height: '50vh',
+                fontSize: '1rem',
+            }}
+        >
+            Loading…
+        </div>
+    );
+}

frontend-next-migration/src/app/[lng]/(home)/_getPage.ts

@@ -1,7 +1,6 @@
 import { MainPageProps } from '@/preparedPages/MainPage';
 import { getServerTranslation } from '@/shared/i18n';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
-import gameImg from '@/shared/assets/images/mainpage/HandGraphicWithBattle.png';
 import iPhone16 from '@/shared/assets/images/mainpage/iPhone 16 Pro mockup natural titanium 1.png';
 import {
     getRouteAllHeroesPage,
@@ -95,7 +94,7 @@ export async function _getPage(lng: string) {
                     AppExternalLinks.fbPost1,
                 ],
                 videoLink: AppExternalLinks.previewVideoYoutube,
-                gameImg: iPhone16.src,
+                gameImg: iPhone16,
             },
             contactSection: {
                 title: t('contact-title'),

frontend-next-migration/src/entities/Furniture/model/data/sets/rakkaus.ts

@@ -23,7 +23,7 @@ import { rarityList } from '../rarities';
 export const rakkausSet: SetInfo = {
     id: 'rakkaus',
     path: 'RAKKAUSSET',
-    author: 'IV',
+    author: 'Ida Vesterinen',
     cover: rakkausCover,
     coverposition: FurnitureSetCoverPosition.MEDIUM,
     items: [

frontend-next-migration/src/entities/Gallery/ui/GalleryCategoriesWithModalSlider.tsx

@@ -83,7 +83,9 @@ export const GalleryCategoriesWithModalSlider = memo(
                                 width={250}
                                 height={292}
                                 className={cls.coverImage}
+                                priority={true}
                                 alt={idx === 0 ? cover.name : `Page ${idx}`}
+                                style={{ width: '100%', height: 'auto' }}
                             />
                         </a>
                     </div>
@@ -112,6 +114,7 @@ export const GalleryCategoriesWithModalSlider = memo(
                                     width={20}
                                     height={20}
                                     alt="Zoom"
+                                    style={{ width: 'auto', height: 'auto' }}
                                 />
                             </button>
                         </div>

frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts

@@ -1,4 +1,4 @@
-import { type GroupInfo, HeroGroup, HeroSlug } from '../types/hero';
+import { type GroupInfo, HeroGroup } from '../types/hero';
 import { buildHeroGroups } from '@/entities/Hero/model/heroGroupsData';
 
 export const initializeHeroGroups = (t: (key: string) => string): Record<HeroGroup, GroupInfo> => {

frontend-next-migration/src/entities/Hero/ui/AttributesPricing3/AttributesPricingV3.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback, useMemo, Dispatch, SetStateAction } from 'react';
+'use client';
+import React, { useCallback, useMemo, useEffect, Dispatch, SetStateAction } from 'react';
 import { useClientTranslation } from '@/shared/i18n';
 import { AttributePricingHelper } from '../../model/stats/AttributesPricingHelper';
-import { statValue } from '../../model/stats/statsDataV2';
-import { statsPricingData } from '../../model/stats/statsPricingData';
-import { Stat } from '../../types/hero';
+import { statValue, statsPricingData, Stat } from '@/entities/Hero';
 import cls from './AttributesPricing.module.scss';
 
 // import { statsPricingData, Stat, statValue } from '@/entities/Hero';
@@ -42,11 +41,13 @@ export const AttributesPricing3 = ({
     const { t } = useClientTranslation('heroes-stats-pricing');
 
     const totalUpgraded = useMemo(() => {
-        const total = AttributePricingHelper.getTotalUpgraded(stats);
-        setUpgradePotential(10 - total);
-        return total;
+        return AttributePricingHelper.getTotalUpgraded(stats);
     }, [stats]);
 
+    useEffect(() => {
+        setUpgradePotential(10 - totalUpgraded);
+    }, [totalUpgraded, setUpgradePotential]);
+
     const setDropdowns = useCallback(
         (statName: string) => {
             const [stat, level] = AttributePricingHelper.getStatAndLevel(
@@ -62,8 +63,46 @@ export const AttributesPricing3 = ({
         [stats, selectedStat],
     );
 
-    //This fixes dropdown updates and out-of-range calculations in Storybook when editing Stats data.
-    const currentLevel = useMemo(() => setDropdowns(selectedStat.name), [stats, selectedStat]);
+    // Derive current level purely without causing side effects during render
+    const currentLevel = useMemo(() => {
+        const [, level] = AttributePricingHelper.getStatAndLevel(
+            selectedStat.name,
+            stats,
+            selectedStat,
+        );
+        return level;
+    }, [stats, selectedStat]);
+
+    // Keep dropdowns in sync if stats or selectedStat change (without causing render-time updates)
+    useEffect(() => {
+        if (!stats || stats.length === 0) return;
+
+        // If current selected stat is not present in the provided stats, fallback to the first available
+        const found = stats.find((stat) => stat.name === selectedStat.name);
+        if (!found) {
+            const fallback = stats[0];
+            const [, level] = AttributePricingHelper.getStatAndLevel(
+                fallback.name,
+                stats,
+                selectedStat,
+            );
+            setSelectedStat(fallback);
+            setFromLevel(level);
+            setToLevel(level);
+            return;
+        }
+
+        const [stat, level] = AttributePricingHelper.getStatAndLevel(
+            selectedStat.name,
+            stats,
+            selectedStat,
+        );
+        if (stat.name !== selectedStat.name) {
+            setSelectedStat(stat);
+        }
+        setFromLevel((prev) => (prev !== level ? level : prev));
+        setToLevel((prev) => (prev !== level ? level : prev));
+    }, [stats, selectedStat, setSelectedStat, setFromLevel, setToLevel]);
 
     const getLevelRange = useCallback(
         () => AttributePricingHelper.getLevelRange(totalUpgraded, currentLevel),
@@ -104,6 +143,17 @@ export const AttributesPricing3 = ({
         [fromLevel, toLevel, selectedStat.rarityClass, selectedStat.defaultLevel],
     );
 
+    // Ensure the select has a valid value on the very first render, even if selectedStat.name is not in stats yet
+    const selectedName = useMemo(() => {
+        const found = stats?.find((stat) => stat.name === selectedStat.name)?.name;
+        return found ?? stats?.[0]?.name ?? '';
+    }, [stats, selectedStat.name]);
+
+    const selectedColor = useMemo(() => {
+        const stat = stats?.find((stat) => stat.name === selectedName);
+        return stat?.color ?? selectedStat.color;
+    }, [stats, selectedName, selectedStat.color]);
+
     if (!statsPricingData) {
         return <h2>{t('Stat pricing data is unavailable')}</h2>;
     }
@@ -115,7 +165,8 @@ export const AttributesPricing3 = ({
                 <select
                     data-testid="stat"
                     className={cls.Stats}
-                    style={{ color: selectedStat.color, borderColor: selectedStat.color }}
+                    value={selectedName}
+                    style={{ color: selectedColor, borderColor: selectedColor }}
                     onChange={handleStatChange}
                 >
                     {stats.map((stat) => (

frontend-next-migration/src/entities/Hero/ui/HeroContainerTempByLeo/components/CloseButton.tsx

@@ -11,7 +11,10 @@ export default function CloseButton({ href, combinedModCss }: Props) {
     return (
         <div className={classNames(cls.xLinkButton, combinedModCss)}>
             {' '}
-            <Link href={href}>
+            <Link
+                href={href}
+                prefetch={false}
+            >
                 <h1>X</h1>
             </Link>
         </div>

frontend-next-migration/src/features/NavigateHeroes/ui/SingleHeroNavMenuAsDropdown/SingleHeroNavMenuAsDropdown.tsx

@@ -11,7 +11,6 @@ import {
 import { getRouteOneHeroPage } from '@/shared/appLinks/RoutePaths';
 import { useClientTranslation } from '@/shared/i18n';
 import useSizes from '@/shared/lib/hooks/useSizes';
-import { classNames } from '@/shared/lib/classNames/classNames';
 
 const SingleHeroNavMenuAsDropdown: React.FC = () => {
     const { isMobileSize, isTabletSize } = useSizes();

frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.module.scss

@@ -1,3 +1,6 @@
 .ScrollBottom {
     width: fit-content !important;
 }
+.Image {
+    height: auto;
+}

frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.tsx

@@ -4,6 +4,7 @@ import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button';
 import { scrollToBottom } from '../model/scrollToBottom/scrollToBottom';
 import { useBottomAnimationCancellation } from '../model/useBottomAnimationCancellation/useBottomAnimationCancellation';
 import Image, { StaticImageData } from 'next/image';
+import cls from './ScrollBottomButton.module.scss';
 
 interface Props {
     speedInMs?: number;
@@ -56,7 +57,7 @@ const ScrollBottomButtonComponent = (props: Props) => {
                     text
                 ) : (
                     <Image
-                        height={20}
+                        className={cls.Image}
                         width={20}
                         src={image}
                         alt={'icon'}

frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.tsx

@@ -27,24 +27,28 @@ const ComingPage = (props: Props) => {
                     <Image
                         src={hateSpeech.src}
                         alt="Hate Speech"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={jokester}
                         alt="Jokester"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={believer}
                         alt="Believer"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={provocator}
                         alt="Provocator"
+                        priority={true}
                         width={150}
                         height={150}
                     />
@@ -53,18 +57,21 @@ const ComingPage = (props: Props) => {
                         alt="Alcoholic"
                         width={150}
                         height={150}
+                        priority={true}
                         className={cls.flipped}
                     />
                     <Image
                         src={purpleGirls}
                         alt="Purple Girls"
                         width={150}
                         height={150}
+                        priority={true}
                         className={cls.flipped}
                     />
                     <Image
                         src={pedant}
                         alt="Pedant"
+                        priority={true}
                         width={150}
                         height={150}
                         className={cls.pedant}

frontend-next-migration/src/preparedPages/EthicalGuidelinesPage/ui/EthicalGuidelinesPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { ScrollTop } from '@/features/ScrollTop';
-import { classNames } from '@/shared/lib/classNames/classNames';
 import { WikiContentWithSidebar } from '@/shared/ui/v2/WikiContentWithSidebar';
 
 interface Section {

frontend-next-migration/src/preparedPages/HeroDevelopmentPage/ui/HeroDevelopmentPage.tsx

@@ -187,6 +187,7 @@ const HeroDevelopmentPage: React.FC<HeroDevelopmentPageProps> = ({ hero }) => {
                             <Image
                                 className={classNames(cls.Image, combinedModCss)}
                                 src={hero?.srcImg}
+                                priority={true}
                                 alt="image"
                             />
                         )}

frontend-next-migration/src/preparedPages/HeroesPages/ui/SingleHeroPage.tsx

@@ -131,6 +131,7 @@ const SingleHeroPage = (props: Props) => {
                                     alt={hero.title}
                                     fill
                                     sizes="100vw"
+                                    priority={true}
                                     className={cls.ResponsiveImage}
                                 />
                             </div>
@@ -221,6 +222,8 @@ const SingleHeroPage = (props: Props) => {
                                     <Image
                                         src={hero.srcImg}
                                         alt={hero.title}
+                                        priority={true}
+                                        sizes="100%"
                                         fill
                                         className={cls.ResponsiveImage}
                                     />

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss

@@ -173,3 +173,8 @@
         font-size: 0.8rem;
     }
 }
+
+.gameImg {
+    width: 100%;
+    height:auto;
+}

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.tsx

@@ -2,7 +2,7 @@
 import { useInView } from 'react-intersection-observer';
 import { Container } from '@/shared/ui/Container';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import cls from './AltZone.module.scss';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import instaIcon from '@/shared/assets/images/Insta2.svg';
@@ -22,7 +22,7 @@ export type Props = {
     };
     socialMediaLinks: string[];
     videoLink: string;
-    gameImg?: string;
+    gameImg?: StaticImageData;
 };
 
 const AltZone = (props: Props) => {

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx

@@ -23,6 +23,7 @@ export const ContactSection = (props: Props) => {
                 <Image
                     src={ContactImg}
                     alt={'Side image with hero'}
+                    priority={true}
                     className={cls.sideImg}
                 />
                 <div className={cls.ContentWithNav}>

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx

@@ -36,6 +36,7 @@ const PlayWithUs = (props: Props) => {
                         src={sideImg}
                         alt={'Side image with hero'}
                         className={cls.sideImg}
+                        priority={true}
                     />
                 </div>
                 <div className={cls.ContentWithNav}>

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.tsx

@@ -36,6 +36,7 @@ export const ProjectDescription = (props: Props) => {
             <div className={cls.imgHolder}>
                 <Image
                     src={greenHaired}
+                    priority={true}
                     alt={'description hero'}
                     style={{ objectFit: 'cover' }}
                     className={classNames(cls.Image)}