added loading.jsx file and it's css subpart

7 files changed, 60 insertions, 7 deletions

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index f107313..7715dc6 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -28,11 +28,15 @@ const AnimeInfoHomepage = async ({ params }) => {
 							/>

 							<div>

 								<p className={styles.animeTitle}>

-									{data.title}

+									<strong

+										style={{ color: "var(--neon-green)" }}

+									>

+										{data.title || "Not Found"}

+									</strong>

 								</p>

 								<p className={styles.animeDescription}>

 									<strong>Description: </strong>

-									{data.description}

+									{data.description || "Not Found"}

 								</p>

 								<hr style={{ borderColor: "gray" }} />

 								<span>

@@ -51,17 +55,19 @@ const AnimeInfoHomepage = async ({ params }) => {
 								</span>

 								<p>

 									<strong>Episodes:</strong>{" "}

-									{data.totalEpisodes}

+									{data.totalEpisodes || "Not Found"}

 								</p>

 								<p>

 									<strong>Release year:</strong>{" "}

-									{data.releaseDate}

+									{data.releaseDate || "Not Found"}

 								</p>

 								<p>

-									<strong>Status:</strong> {data.status}

+									<strong>Status:</strong>{" "}

+									{data.status || "Not Found"}

 								</p>

 								<p>

-									<strong>Type:</strong> {data.type}

+									<strong>Type:</strong>{" "}

+									{data.type || "Not Found"}

 								</p>

 							</div>

 						</div>

diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx
index b8b4b53..66c491a 100644
--- a/src/app/anime/components/search.jsx
+++ b/src/app/anime/components/search.jsx
@@ -10,9 +10,13 @@ import SearchResults from "./search_results";
 const SearcBar = () => {
 	const [title, setTitle] = useState("");
 	const [searchResults, setSearchResults] = useState(null);
+	const [loading, setLoading] = useState(false);
 
 	const handleSearchInput = async (title) => {
+		setSearchResults(null);
+		setLoading(true);
 		setSearchResults(await SearchResults(title));
+		setLoading(false);
 	};
 
 	return (
@@ -47,6 +51,11 @@ const SearcBar = () => {
 					</button>
 				</Link>
 			</section>
+			{loading && (
+				<p className={styles.SearchLoading}>
+					Please wait while we crunch up all the data.....
+				</p>
+			)}
 			{searchResults}
 		</main>
 	);
diff --git a/src/app/anime/loading.jsx b/src/app/anime/loading.jsx
new file mode 100644
index 0000000..00ce39c
--- /dev/null
+++ b/src/app/anime/loading.jsx
@@ -0,0 +1,11 @@
+import styles from "./styles/loading.module.css";
+
+const Loading = async () => {
+	return (
+		<main className={styles.LoadingContainer}>
+			<strong>Loading...</strong>
+		</main>
+	);
+};
+
+export default Loading;
diff --git a/src/app/anime/styles/loading.module.css b/src/app/anime/styles/loading.module.css
new file mode 100644
index 0000000..f0d0606
--- /dev/null
+++ b/src/app/anime/styles/loading.module.css
@@ -0,0 +1,12 @@
+.LoadingContainer {
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.LoadingContainer strong {
+	color: white;
+	font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css
index b7e35ab..25fa4d4 100644
--- a/src/app/anime/styles/search.module.css
+++ b/src/app/anime/styles/search.module.css
@@ -37,6 +37,11 @@
 	width: 100%;
 }
 
+.SearchLoading {
+	color: white;
+	text-align: center;
+}
+
 /* Search Results */
 
 .SearchResultsContainer {
@@ -60,6 +65,7 @@
 
 .AnimeEntry img {
 	border-radius: 0.5rem;
+	margin-left: 0.2rem;
 }
 
 .SearchResultsContainer::-webkit-scrollbar {
diff --git a/src/app/movies/components/video_player.jsx b/src/app/movies/components/video_player.jsx
index 86ff8e5..86b6748 100644
--- a/src/app/movies/components/video_player.jsx
+++ b/src/app/movies/components/video_player.jsx
@@ -7,7 +7,7 @@ export default function VIDEO_PLAYER({ id: id }) {
 	const [frame, setFrame] = useState(null);
 
 	useEffect(() => {
-		make_player(`https://vidsrc.pro/embed/movie/${id}`);
+		make_player(`https://vidsrc.icu/embed/movie/${id}`);
 	}, []);
 
 	function make_player(url) {
diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css
index a0da8d9..b848f7f 100644
--- a/src/app/movies/styles/info.module.css
+++ b/src/app/movies/styles/info.module.css
@@ -53,6 +53,15 @@
 	overflow: auto;
 }
 
+.MovieDescription::-webkit-scrollbar {
+	width: 5px;
+}
+
+.MovieDescription::-webkit-scrollbar-thumb {
+	background-color: var(--nord-yellow);
+	border-radius: 1rem;
+}
+
 .OtherInfo {
 	display: flex;
 	flex-direction: column;