trending: added texts to loading page

src/app/trending/Trending.tsx

@@ -75,8 +75,13 @@ export const Trending: Component = ({}) => {
 					<h1 className="text-xl">Trending</h1>
 				</div>
 
-				{isLoading && !data && <LoadingPage />}
+				{isLoading && !data && (
-				{error && (
+					<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} />

src/app/trending/page.tsx

@@ -12,7 +12,7 @@ const Page: NextPage = () => {
 			<Suspense
 				fallback={
 					<Container>
-						<LoadingPage />
+						<LoadingPage text="Loading trending page" />
 					</Container>
 				}
 			>