جلب البيانات والـ Streaming

// الحل الكامل

// 1. ملف app/dashboard/loading.js
export default function DashboardLoading() {
  return (
    <div className="p-8">
      <div className="animate-pulse space-y-6">
        <div className="h-8 bg-gray-200 rounded w-1/3"></div>
        <div className="grid grid-cols-3 gap-4">
          <div className="h-24 bg-gray-200 rounded-xl"></div>
          <div className="h-24 bg-gray-200 rounded-xl"></div>
          <div className="h-24 bg-gray-200 rounded-xl"></div>
        </div>
        <div className="space-y-3">
          <div className="h-12 bg-gray-200 rounded"></div>
          <div className="h-12 bg-gray-200 rounded"></div>
          <div className="h-12 bg-gray-200 rounded"></div>
        </div>
      </div>
    </div>
  );
}

// 2. ملف app/dashboard/page.js
import { Suspense } from "react";

async function Stats() {
  const res = await fetch("https://api.example.com/stats", {
    cache: "no-store",
  });
  const stats = await res.json();

  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="p-6 bg-blue-50 rounded-xl">
        <p className="text-sm text-blue-600">المستخدمون</p>
        <p className="text-3xl font-bold">{stats.users}</p>
      </div>
      <div className="p-6 bg-green-50 rounded-xl">
        <p className="text-sm text-green-600">المبيعات</p>
        <p className="text-3xl font-bold">{stats.sales}</p>
      </div>
      <div className="p-6 bg-purple-50 rounded-xl">
        <p className="text-sm text-purple-600">الطلبات</p>
        <p className="text-3xl font-bold">{stats.orders}</p>
      </div>
    </div>
  );
}

async function Activity() {
  const res = await fetch("https://api.example.com/activity", {
    cache: "no-store",
  });
  const activities = await res.json();

  return (
    <div className="space-y-3">
      {activities.map((a) => (
        <div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
          <span className="text-2xl">{a.icon}</span>
          <div>
            <p className="font-medium">{a.title}</p>
            <p className="text-sm text-gray-500">{a.time}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function StatsSkeleton() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {[1, 2, 3].map((i) => (
        <div key={i} className="animate-pulse p-6 bg-gray-100 rounded-xl">
          <div className="h-4 bg-gray-300 rounded w-1/2 mb-2"></div>
          <div className="h-8 bg-gray-300 rounded w-3/4"></div>
        </div>
      ))}
    </div>
  );
}

function ActivitySkeleton() {
  return (
    <div className="animate-pulse space-y-3">
      {[1, 2, 3, 4, 5].map((i) => (
        <div key={i} className="h-14 bg-gray-100 rounded-lg"></div>
      ))}
    </div>
  );
}

export default function DashboardPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">لوحة التحكم</h1>

      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-4">الإحصائيات</h2>
        <Suspense fallback={<StatsSkeleton />}>
          <Stats />
        </Suspense>
      </section>

      <section>
        <h2 className="text-xl font-semibold mb-4">آخر النشاطات</h2>
        <Suspense fallback={<ActivitySkeleton />}>
          <Activity />
        </Suspense>
      </section>
    </div>
  );
}