fix: match events loading skeleton to page layout

src/components/page-loading.tsx

@@ -1,4 +1,5 @@
 import { Skeleton } from "@/components/ui/skeleton";
+import { EventResultsSkeleton } from "@/components/events/EventResultsSkeleton";
 
 export function BlogCardsSkeleton({ count = 6 }: { count?: number }) {
   return (
@@ -131,35 +132,27 @@ export function BlogDetailPageLoading() {
   );
 }
 
-export function ListingPageLoading() {
+export function EventsPageLoading() {
   return (
     <div className="min-h-screen bg-background" dir="rtl">
-      <div className="container mx-auto px-4 py-8">
-        <Skeleton className="mb-8 h-10 w-40" />
-        <Skeleton className="mb-8 h-10 w-full max-w-md" />
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div
-              key={index}
-              className="overflow-hidden rounded-lg border bg-card"
-            >
-              <Skeleton className="aspect-video w-full rounded-none" />
-              <div className="space-y-4 p-6">
-                <div className="flex items-start justify-between gap-3">
-                  <Skeleton className="h-6 flex-1" />
-                  <Skeleton className="h-6 w-16" />
-                </div>
-                <Skeleton className="h-4 w-32" />
-                <div className="space-y-3 pt-2">
-                  <Skeleton className="h-4 w-full" />
-                  <Skeleton className="h-4 w-5/6" />
-                  <Skeleton className="h-10 w-full" />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <main className="container mx-auto max-w-screen-2xl px-3 py-5 sm:px-4 sm:py-8 lg:px-6">
+        <header className="mb-6 border-b border-border pb-5 sm:mb-8 sm:pb-6" aria-hidden="true">
+          <Skeleton className="h-8 w-48 sm:h-9 sm:w-56 motion-reduce:animate-none" />
+          <div className="mt-2 grid max-w-3xl gap-2">
+            <Skeleton className="h-4 w-full max-w-3xl motion-reduce:animate-none" />
+            <Skeleton className="h-4 w-3/5 max-w-xl motion-reduce:animate-none" />
+          </div>
+        </header>
+
+        <section aria-label="نتایج رویدادها" aria-busy="true" className="min-w-0">
+          <div aria-hidden="true" dir="rtl" className="mb-4 flex items-center gap-2 sm:mb-5">
+            <Skeleton className="h-11 min-w-0 flex-1 rounded-md motion-reduce:animate-none" />
+            <Skeleton className="h-11 w-10 shrink-0 rounded-md min-[640px]:w-24 motion-reduce:animate-none" />
+          </div>
+
+          <EventResultsSkeleton />
+        </section>
+      </main>
     </div>
   );
 }