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/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)}
           >

src/components/atoms/Spinner/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./styles.module.css";
+
+export const Spinner = () => {
+  return <span className={styles.loader} />;
+};

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);
+  }
+}