From 8d29c298719b9ed84807f0fef98c841b9432a68a Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Thu, 31 Oct 2024 17:12:47 +0100
Subject: [PATCH] feat: Add loading page to event details page

---
 .../(default)/events/[id]/loading.tsx         | 28 +++++++++++++++++++
 .../[locale]/(default)/events/[id]/page.tsx   | 16 ++++++-----
 2 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/app/[locale]/(default)/events/[id]/loading.tsx

diff --git a/src/app/[locale]/(default)/events/[id]/loading.tsx b/src/app/[locale]/(default)/events/[id]/loading.tsx
new file mode 100644
index 0000000..15d40e2
--- /dev/null
+++ b/src/app/[locale]/(default)/events/[id]/loading.tsx
@@ -0,0 +1,28 @@
+import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { Separator } from '@/components/ui/Separator';
+import { ArrowLeftIcon, CalendarIcon, MapPinIcon } from 'lucide-react';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export default function EventDetailsLoading() {
+  return (
+    <>
+      <Skeleton className='my-4 h-12 w-3/4 rounded-lg' />
+      <Skeleton className='h-8 w-1/2 rounded-lg' />
+      <div className='mt-4 space-y-4'>
+        <div className='flex items-center gap-2'>
+          <CalendarIcon className='h-8 w-8' />
+          <Skeleton className='h-6 w-64 rounded-lg' />
+        </div>
+        <div className='flex items-center gap-2'>
+          <MapPinIcon className='h-8 w-8' />
+          <Skeleton className='h-6 w-32 rounded-lg' />
+        </div>
+        <Separator />
+        <div className='flex justify-between'>
+          <Skeleton className='h-36 w-3/5 rounded-lg' />
+          <Skeleton className='h-48 w-48 rounded-full' />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/[locale]/(default)/events/[id]/page.tsx b/src/app/[locale]/(default)/events/[id]/page.tsx
index 8188785..652d855 100644
--- a/src/app/[locale]/(default)/events/[id]/page.tsx
+++ b/src/app/[locale]/(default)/events/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { Separator } from '@/components/ui/Separator';
@@ -8,10 +8,11 @@ import { CalendarIcon, MapPinIcon } from 'lucide-react';
 import { notFound } from 'next/navigation';
 
 export async function generateMetadata({
-  params: { locale },
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'layout' });
 
   return {
@@ -27,12 +28,13 @@ function datesOnSameDay(date1: Date, date2: Date) {
   );
 }
 
-export default function EventDetailsPage({
-  params: { locale, id },
+export default async function EventDetailsPage({
+  params,
 }: {
-  params: { locale: string; id: string };
+  params: Promise<{ locale: string; id: string }>;
 }) {
-  unstable_setRequestLocale(locale);
+  const { locale, id } = await params;
+  setRequestLocale(locale);
   const event = events.find((event) => event.id.toString() === id);
 
   if (!event) return notFound();