Implement loading spinner and Polish translations: add Spinner component for loading states in Search and SearchList, update UI text to Polish for improved localization, and enhance Pagination styles for better visibility.

src/components/molecules/SearchMovies/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useState } from "react";
 import { TMDB } from "@/lib/tmdb";
-import { MovieCard } from "@/components/atoms/MovieCard";
 import { SearchResult } from "@/lib/tmdb/types";
 import { FC } from "react";
 import { useEffect } from "react";
 import { Pagination } from "@/components/atoms/Pagination";
 import { MovieList } from "../MovieList";
+import { Spinner } from "@/components/atoms/Spinner";
 
 type Props = {
   query: string;
@@ -21,12 +21,17 @@ export const SearchList: FC<Props> = ({ query }) => {
     page = 1,
   } = response ?? {};
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const handleSearch = async (query: string, page: number) => {
+    setIsLoading(true);
+
     const data = await TMDB.search({
       query,
       page,
     });
     setResponse(data);
+    setIsLoading(false);
   };
 
   const handlePageChange = (page: number) => {
@@ -43,18 +48,26 @@ export const SearchList: FC<Props> = ({ query }) => {
     <section className="mb-4 md:mb-10">
       <div className="container">
         <p className="text-sm text-gray-500">
-          {total_results} movies found for your search
+          {total_results} filmów znaleziono dla Twojego wyszukiwania
         </p>
 
-        <MovieList
-          overrideMovies={results?.map((m) => ({
-            ...m,
-            favorite: false,
-            seen: false,
-            genre_ids: JSON.stringify(m.genre_ids),
-          }))}
-          fluid
-        />
+        <div className="relative">
+          {isLoading && (
+            <div className="absolute -inset-10 flex pt-60 justify-center  backdrop-blur-xs z-10">
+              <Spinner />
+            </div>
+          )}
+          <MovieList
+            overrideMovies={results?.map((m) => ({
+              ...m,
+              favorite: false,
+              seen: false,
+              genre_ids: JSON.stringify(m.genre_ids),
+            }))}
+            fluid
+          />
+        </div>
+
         <Pagination
           totalPages={total_pages}
           currentPage={page}