Fix lint issues and console errors and warnings

[juhaj77]

📄 Pull Request Overview

The task was to fix lint errors as well as errors and warnings from the browser console. Removing the @ts-ignore comments was intentionally left for a separate issue, as there are over 80 of them and the effort is quite substantial.

Closes #600

🔧 Changes Made

lint

The lint warnings were mostly unused import statements. The most labor-intensive lint warning concerned the BarIndicator component, where linting reported: "Arrow function has a complexity of 11. Maximum allowed is 10." This component was refactored to eliminate the warning.

console

common warnings

Most of the console warnings were of the type:

Image with src "/next/static/media/iPhone 16 Pro mockup natural titanium 1.a65324a6.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles width: "auto" or height: "auto" to maintain the aspect ratio."

Other common warnings were about the Image component missing the priority prop.

Login form

One recurring warning in the login form was: "Found 3 elements with non-unique id #input-: (More info: https://goo.gl/9p2vKq
)." The fix had to be made in the CustomForm component. A unique ID has been generated.

Hero development page

Warning: Cannot update a component (HeroDevelopmentPage) while rendering a different component (AttributesPricing3). To locate the bad setState() call inside AttributesPricing3, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
at AttributesPricing3 (AttributesPricingV3.tsx:33:5)

This warning was fixed by moving state updates from useMemo hooks to useEffect hooks.

Page loader

The PageLoader on the Collections and Heroes pages throws the following warning:
The resource http://localhost:5173/_next/static/css/app/%5Blng%5D/(helper)/collections/loading.css?v=1763477498379 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

You get the warning because the route has a loading.tsx file, which imports styles (PageLoader.module.scss) → Next.js creates a route-specific CSS chunk and preloads it. If the actual loading UI never has time to appear (the page renders very fast), the preloaded CSS ends up unused and the browser prints a warning.

Changed the route’s loading.tsx to return a lightweight loader using inline styles, without CSS module imports. In this case, Next.js does not generate a separate loading.css chunk → nothing gets preloaded → the warning disappears

Music collection page

The warnings reported on the collections/music page were investigated and traced to the embedded YouTube player. The video is rendered on the page via an iframe with src="https://www.youtube.com/embed/${youtubeId}?rel=0". The remaining warnings are produced by scripts and markup injected by YouTube inside the iframe, which cannot be modified or controlled from our application code.

Why not fixing this in this PR
-The issues are not actionable within our codebase without removing or replacing the YouTube player.
-Patching or suppressing third‑party iframe warnings is not reliable and may introduce maintenance risk.
-The current embed is functionally correct and required for the page’s content.

Possible future improvements (out of scope for this PR)
-Switch to YouTube’s Privacy‑Enhanced Mode (https://www.youtube-nocookie.com/embed/${youtubeId}) to reduce tracking‑related noise.
-Add loading="lazy" and referrerPolicy="strict-origin-when-cross-origin" to the iframe for best practices/performance.
-Consider a “lite” YouTube embed (thumbnail + click‑to‑load) to defer loading the player script until interaction.
-Replace the YouTube embed with self‑hosted or another provider if we need stricter control over warnings.

Given the above, this PR leaves the YouTube embed as is and acknowledges the remaining warnings as a limitation of the third‑party integration.

Picture gallery

The picture gallery shows an Image-priority warning, but this gallery will be replaced with a new one, unless it has already been replaced.

Furniture popup

collections/furniture/all popup: installHook.js:1 Image with src "/_next/static/media/clock.d9c2063c.webp" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13 Error Component Stack
at eval (image-component.js:243:47)
at div ()

fix: objectFit="contain" -> style={{ objectFit: 'contain' }}

[Skoivumaki]

Intresting findings. Solid documentation, otherwise I would have no idea whats going on :D

[Skoivumaki]

Couldn't reproduce any of the mentioned errors. All lint errors have been fixed. 👍

This is something that I still got quite often and might be related to what you mentioned:
The resource at “http://localhost:5173/_next/static/media/18a6d2958e497d80-s.p.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
but these things are different based on browser used. (Mozilla, on build and dev)

I believe the problems with PageLoader should be done in separate issue.

Todo:
Fix whatever broke feedback component:

[juhaj77]

If you mean that input-text field, it was fixed in an earlier issue titled UI/UX improvements and it was merged into the dev branch. That merge clearly has not been updated into this branch yet.

[Rutjake]

I fixed the build issues and changed the artist name in the furniture collection.