feat: Add loading page to event details page

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>
+    </>
+  );
+}

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();