From 7e13dea3c1dccdae6b7d183f4a50a05dc5e83a40 Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Sun, 31 Mar 2024 21:29:19 +0200
Subject: [PATCH] trending: added texts to loading page

---
 src/app/trending/Trending.tsx | 11 ++++++++---
 src/app/trending/page.tsx     |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/trending/Trending.tsx b/src/app/trending/Trending.tsx
index 34805fa..217e4e4 100644
--- a/src/app/trending/Trending.tsx
+++ b/src/app/trending/Trending.tsx
@@ -75,8 +75,13 @@ export const Trending: Component = ({}) => {
 					<h1 className="text-xl">Trending</h1>
 				</div>
 
-				{isLoading && !data && <LoadingPage />}
-				{error && (
+				{isLoading && !data && (
+					<LoadingPage
+						text={`Loading trending page for region \`${region?.name}\``}
+					/>
+				)}
+
+				{error !== null && (
 					<div className="flex-1 flex items-center justify-center">
 						<div className="text-center">
 							<h1 className="text-xl">
@@ -90,7 +95,7 @@ export const Trending: Component = ({}) => {
 						</div>
 					</div>
 				)}
-				{data && error === null && (
+				{data && data.length !== 0 && error === null && (
 					<div className="grid gap-4 py-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
 						{data.map((video) => (
 							<Video key={video.id} data={video} />
diff --git a/src/app/trending/page.tsx b/src/app/trending/page.tsx
index 18c4678..54701f4 100644
--- a/src/app/trending/page.tsx
+++ b/src/app/trending/page.tsx
@@ -12,7 +12,7 @@ const Page: NextPage = () => {
 			<Suspense
 				fallback={
 					<Container>
-						<LoadingPage />
+						<LoadingPage text="Loading trending page" />
 					</Container>
 				}
 			>