RTK QueryBeginner

Loading States — Skeleton ও UI

Query loading, mutation pending, refetching-এর visual — বাংলায়।

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

কম্বো state একসাথেtsx

tsx

"use client";

export function ProductsView() {
  const {
    data,
    isLoading,
    isFetching,
    isUninitialized,
    refetch,
  } = useGetProductsQuery();

  // loading overlay for background refetch
  return (
    <div className="relative">
      {isLoading || isUninitialized ? (
        <ProductGridSkeleton />
      ) : (
        <ProductGrid products={data ?? []} />
      )}

      {/* background refetch-এ ছোটো বার */}
      {isFetching && !isLoading && (
        <div className="absolute right-2 top-2">
          <RefreshCw className="size-4 animate-spin text-muted-foreground" />
        </div>
      )}
    </div>
  );
}

Mutation pending

button disabledtsx

tsx

const [createOrder, { isLoading }] = useCreateOrderMutation();

<Button disabled={isLoading || items.length === 0}>
  {isLoading ? "অর্ডার হচ্ছে…" : "চেকআউট"}
</Button>

optimistic-এ loading-নয়

optimistic update-এর সময় isFetching সত্য কিন্তু UI আগেই বদলেছে — সেখানে বড় loading block দেবেন না; ছোটো subtle indicator-only।

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