fix: minor issues

Author: Quiddlee

package-lock.json

@@ -44,6 +44,7 @@ describe('Movie', () => {
     mockedUseGetMovieList.mockReturnValue({
       movieList: mockMovies,
       totalResults: mockMovies.length,
+      isInitialLoading: false,
     });
 
     renderWithRouterProvider();

src/entities/movie/Movie.test.tsx

@@ -1,4 +1,4 @@
-import { memo, MouseEvent } from 'react';
+import { memo, MouseEvent, SyntheticEvent } from 'react';
 
 import { useLocation } from 'react-router-dom';
 
@@ -31,6 +31,11 @@ const Movie = memo(function Movie({
   const animationDelay = `0.${String(delay)}s`;
   const isDetailsClose = pathname.slice(1) === '';
 
+  const handleError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.target as HTMLImageElement;
+    target.src = ReactLogo;
+  }
+
   return (
     <LinkWithQuery
       data-testid="movie-item"
@@ -54,6 +59,7 @@ const Movie = memo(function Movie({
           onBlur={handleMouseOut}
           className="h-full space-y-4 rounded-4xl p-2">
           <img
+            onError={handleError}
             data-testid="movie-poster"
             className="h-80 w-full rounded-4xl object-cover"
             src={poster}

src/entities/movie/ui/Movie.tsx

@@ -27,6 +27,7 @@ describe('MovieList', () => {
     mockedUseGetMovieList.mockReturnValue({
       movieList: undefined,
       totalResults: 0,
+      isInitialLoading: false,
     });
 
     renderWithRouterProvider(
@@ -53,6 +54,7 @@ describe('MovieList', () => {
     mockedUseGetMovieList.mockReturnValue({
       movieList: mockMovies,
       totalResults: mockMovies.length,
+      isInitialLoading: false,
     });
 
     renderWithRouterProvider(

src/features/MovieList/MovieList.test.tsx

@@ -33,6 +33,7 @@ describe('Pagination', () => {
     mockedUseGetMovieList.mockReturnValue({
       movieList: mockMovies,
       totalResults,
+      isInitialLoading: false,
     });
 
     renderWithRouterProvider(<Pagination scroll={scroll} />);

src/features/Pagination/Pagination.test.tsx

@@ -7,6 +7,7 @@ import MovieListHeader from '../../features/MovieList/ui/MovieListHeader.tsx';
 import PageNum from '../../features/MovieList/ui/PageNum.tsx';
 import Pagination from '../../features/Pagination/Pagination.tsx';
 import Search from '../../features/Search/Search.tsx';
+import useGetMovieList from '../../shared/hooks/useGetMovieList.ts';
 import useScroll from '../../shared/hooks/useScroll.ts';
 import useTooltip from '../../shared/hooks/useTooltip.ts';
 import Tooltip from '../../shared/ui/Tooltip.tsx';
@@ -19,6 +20,7 @@ import Main from '../../widgets/Main/Main.tsx';
 function AppLayout() {
   const { containerRef, scrollRef } = useScroll<HTMLDivElement>();
   const { tooltipRef, hideTooltip, showTooltip } = useTooltip(scrollRef);
+  const { isInitialLoading } = useGetMovieList();
 
   return (
     <div
@@ -31,7 +33,7 @@ function AppLayout() {
         <Loader scroll={scrollRef} />
         <GradientBackground />
         <Header>
-          <Logo />
+          {!isInitialLoading && <Logo />}
           <Search scroll={scrollRef} />
           <TotalResults />
         </Header>

src/pages/AppLayout/AppLayout.tsx

@@ -1,11 +1,11 @@
 function GradientBackground() {
   return (
-    <div className="absolute h-full w-full overflow-hidden">
-      <div className="absolute left-1/2 h-1/3 w-1/2 animate-float rounded-full bg-pink-300 opacity-90 blur-3xl md:blur-[140px]" />
-      <div className="animation-delay-2000 absolute right-2/4 top-0 h-1/4 w-2/5 animate-float rounded-full bg-violet-400 opacity-90 blur-3xl saturate-200 md:blur-[140px]" />
-      <div className="animation-delay-4000 absolute right-2/3 top-2/4 h-1/4 w-1/5 animate-float rounded-full bg-blue-400 opacity-90 blur-3xl saturate-200 md:blur-[140px]" />
-      <div className="animation-delay-6000 absolute bottom-1/4 left-1/2 h-1/5 w-1/5 animate-float rounded-full bg-emerald-300 opacity-90 blur-3xl md:blur-[140px]" />
-      <div className="animation-delay-8000 absolute bottom-0 right-0 h-1/3 w-1/2 animate-float rounded-l-full bg-emerald-800 opacity-90 blur-3xl md:blur-[140px]" />
+    <div className="absolute h-full min-h-[2000px] w-full overflow-hidden">
+      <div className="absolute left-1/2 h-1/3 w-1/2 animate-float rounded-full bg-pink-300 blur-3xl md:blur-[100px]" />
+      <div className="animation-delay-2000 absolute right-2/4 top-0 h-1/4 w-2/5 animate-float rounded-full bg-violet-400 blur-3xl saturate-200 md:blur-[100px]" />
+      <div className="animation-delay-4000 absolute right-2/3 top-2/4 h-1/4 w-1/5 animate-float rounded-full bg-blue-400 blur-3xl saturate-200 md:blur-[100px]" />
+      <div className="animation-delay-6000 absolute bottom-1/4 left-1/2 h-1/5 w-1/5 animate-float rounded-full bg-emerald-300 blur-3xl md:blur-[100px]" />
+      <div className="animation-delay-8000 absolute bottom-0 right-0 h-1/3 w-1/2 animate-float rounded-l-full bg-emerald-800 blur-3xl md:blur-[100px]" />
     </div>
   );
 }

src/pages/AppLayout/ui/GradientBackground.tsx

@@ -1,6 +1,6 @@
 import LinkWithQuery from '../../shared/ui/LinkWithQuery.tsx';
 import Modal from '../../shared/ui/Modal.tsx';
-import GradientBackground from '../AppLayout/ui/GradientBackground.tsx';
+import GradientBackground from "../AppLayout/ui/GradientBackground.tsx";
 
 function NotFound() {
   return (

src/pages/NotFound/NotFound.tsx

@@ -38,7 +38,7 @@ function useGetMovieList() {
     dispatch(dataFetchedDetailsPage(isFetching || isLoading));
   }, [dispatch, isFetching, isLoading]);
 
-  return { movieList, totalResults };
+  return { movieList, totalResults, isInitialLoading: isLoading };
 }
 
 export default useGetMovieList;