gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

This commit is contained in:
Norbert Maciaszek 2025-08-15 15:20:04 +02:00
parent 3a7669e26d
commit 7373d64123
6 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(withGlobalData)/search/page.tsx
View File

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

7
src/components/atoms/Pagination/index.tsx
View File

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

5
src/components/atoms/Spinner/index.tsx Normal file
View File

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

32
src/components/atoms/Spinner/styles.module.css Normal file
View File

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

35
src/components/molecules/SearchMovies/index.tsx
View File

@ -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}

9
src/components/organisms/Navbar/components/Search/index.tsx
View File

@ -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>