TanStackIntermediate

Loading States — Skeleton ও spinner

Table/Form skeleton, button pending ও suspense boundary — বাংলায়।

7টি অংশবাংলা ভাষায়

Table skeletontsx

tsx

export function ProductTableSkeleton() {
  return (
    <div className="space-y-3">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 rounded-lg border p-3">
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-16" />
          <Skeleton className="ml-auto h-8 w-24" />
        </div>
      ))}
    </div>
  );
}

button loading

mutations পেন্ডিং-এtsx

tsx

<Button disabled={createProduct.isPending}>
  {createProduct.isPending ? (
    <Loader2 className="size-4 animate-spin" />
  ) : (
    <Plus className="size-4" />
  )}
  {createProduct.isPending ? "সেভ হচ্ছে…" : "নতুন Product"}
</Button>

Suspense-এ query (optional)

useSuspenseQuerytsx

tsx

import { useSuspenseQuery } from "@tanstack/react-query";

export function CurrentOrders() {
  const { data } = useSuspenseQuery({
    queryKey: productKeys.lists(),
    queryFn: () => listProducts({ page: 1, pageSize: 5 }),
  });

  return <OrderPreview orders={data.items} />;
}

Suspense wraptsx

tsx

<Suspense fallback={<ProductTableSkeleton />}>
  <CurrentOrders />
</Suspense>

গোটা পেজ loading দেবেন না

চোখ-ধাঁধানো skeleton-এ isPending দেখালেও বাকি UI-র popup এলোমেলো হয়। সেরা প্রতি-অঞ্চল loading — table-এর skeleton, button-এর spinner, form-এর disabled — যাতে অন্য অঞ্চল স্পর্শ না করে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।