From 7373d641235ef92ab7f8c17506aebbd154bcb3a4 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Fri, 15 Aug 2025 15:20:04 +0200
Subject: [PATCH] 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/app/(withGlobalData)/search/page.tsx      |  2 +-
 src/components/atoms/Pagination/index.tsx     |  7 ++--
 src/components/atoms/Spinner/index.tsx        |  5 +++
 .../atoms/Spinner/styles.module.css           | 32 +++++++++++++++++
 .../molecules/SearchMovies/index.tsx          | 35 +++++++++++++------
 .../Navbar/components/Search/index.tsx        |  9 ++++-
 6 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 src/components/atoms/Spinner/index.tsx
 create mode 100644 src/components/atoms/Spinner/styles.module.css

diff --git a/src/app/(withGlobalData)/search/page.tsx b/src/app/(withGlobalData)/search/page.tsx
index 045d673..23af2d9 100644
--- a/src/app/(withGlobalData)/search/page.tsx
+++ b/src/app/(withGlobalData)/search/page.tsx
@@ -11,7 +11,7 @@ export default async function SearchPage({
     <>
       <section className="container">
         <h1 className="text-2xl">
-          Search for: <strong>{s}</strong>
+          Wyszukiwanie: <strong>{s}</strong>
         </h1>
       </section>
       <SearchList query={s} />
diff --git a/src/components/atoms/Pagination/index.tsx b/src/components/atoms/Pagination/index.tsx
index 0226cfe..f96f925 100644
--- a/src/components/atoms/Pagination/index.tsx
+++ b/src/components/atoms/Pagination/index.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { FC } from "react";
 
 type Props = {
@@ -13,11 +12,11 @@ export const Pagination: FC<Props> = ({
   onPageChange,
 }) => {
   return (
-    <ul className="flex justify-center gap-3 text-gray-900 my-10">
+    <ul className="flex justify-center gap-3  my-10">
       {currentPage > 1 && (
         <li>
           <button
-            className="grid size-8 place-content-center rounded border border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
+            className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
             aria-label="Previous page"
             onClick={() => onPageChange(currentPage - 1)}
           >
@@ -44,7 +43,7 @@ export const Pagination: FC<Props> = ({
       {currentPage < totalPages && (
         <li>
           <button
-            className="grid size-8 place-content-center rounded border border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
+            className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
             aria-label="Next page"
             onClick={() => onPageChange(currentPage + 1)}
           >
diff --git a/src/components/atoms/Spinner/index.tsx b/src/components/atoms/Spinner/index.tsx
new file mode 100644
index 0000000..a78d3c6
--- /dev/null
+++ b/src/components/atoms/Spinner/index.tsx
@@ -0,0 +1,5 @@
+import styles from "./styles.module.css";
+
+export const Spinner = () => {
+  return <span className={styles.loader} />;
+};
diff --git a/src/components/atoms/Spinner/styles.module.css b/src/components/atoms/Spinner/styles.module.css
new file mode 100644
index 0000000..7ad8d63
--- /dev/null
+++ b/src/components/atoms/Spinner/styles.module.css
@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  left: 6px;
+  top: 10px;
+  width: 12px;
+  height: 12px;
+  color: #ff3d00;
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow: 25px 2px, 10px 22px;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/molecules/SearchMovies/index.tsx b/src/components/molecules/SearchMovies/index.tsx
index aa08e91..a1b1cbb 100644
--- a/src/components/molecules/SearchMovies/index.tsx
+++ b/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}
diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index c0c0d33..ea8635c 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/src/components/organisms/Navbar/components/Search/index.tsx
@@ -9,18 +9,20 @@ import { useRef } from "react";
 import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { Button } from "@/components/atoms/Button";
 import { MovieList } from "@/components/molecules/MovieList";
+import { Spinner } from "@/components/atoms/Spinner";
 
 export const Search = () => {
   const ref = useRef<HTMLDivElement>(null);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [response, setResponse] = useState<SearchResult | null>(null);
   const [query, setQuery] = useState("");
+  const isLoading = query.length > 2 && !response;
   const { results, total_pages, total_results = 0 } = response ?? {};
 
   const handleSearch = async (query: string) => {
     setQuery(query);
+    setResponse(null);
     if (query.length < 3) {
-      setResponse(null);
       return;
     }
 
@@ -65,6 +67,11 @@ export const Search = () => {
                 autoFocus={true}
               />
             </div>
+            {isLoading && (
+              <div className="col-span-full mt-2 lg:mt-30 text-center ">
+                <Spinner />
+              </div>
+            )}
             {results && (
               <div className="col-span-full mt-2 lg:mt-10 text-center ">
                 <p className="text-white">{total_results} movies found</p>