PricingLoginStart free
Next.js 15 Fullstack (App Router + Server Actions) · Ders

Anlamlı loading.tsx ve İskeletler Oluşturma

Kaymayı önlemek için son yerleşimle eşleşen rota düzeyinde yükleme durumları ve iskelet yer tutucuları oluşturun.

2. ders / 413 adım

Anlamlı loading.tsx ve İskeletler Oluşturma, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why loading.tsx Exists

In the App Router, a loading.tsx file is special: Next.js automatically wraps your route segment's page.tsx in a React <Suspense> boundary and shows loading.tsx as the fallback while the server component streams.

  • You get an instant loading state with zero manual Suspense wiring.
  • It only triggers on the server-render of that segment, not on every client interaction.
  • The fallback is shown immediately while the page's async data resolves.

This lesson is about making that fallback meaningful so the user perceives speed and the layout does not jump.

The File Convention

Drop a loading.tsx next to your page.tsx in any route segment. Its default export is rendered as the Suspense fallback for that segment and everything below it.

  • It is a normal React component — it can be a Server Component (the default) since it renders only static markup.
  • No props are passed to it; it must be self-contained.
  • Keep it lightweight so it ships and paints fast.
// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="dashboard-grid" aria-busy="true">
      <DashboardSkeleton />
    </div>
  );
}

The Real Goal: Avoid Layout Shift

A bad loading state replaces your page with a centered spinner, then snaps to a totally different layout when data arrives. That visual jump hurts perceived performance and Cumulative Layout Shift (CLS).

A good skeleton mirrors the final layout:

  • Same number of cards, rows, and columns.
  • Same approximate widths and heights as the real content.
  • Same spacing and grid structure.

When real data swaps in, nothing moves — only the gray placeholders fill with content.

A Reusable Skeleton Primitive

Start with one tiny building block: a Skeleton box that renders a gray, rounded rectangle. You compose everything else from it.

  • Accept className so callers control width, height, and shape.
  • Add an animate-pulse style (Tailwind) or a CSS shimmer for the loading feel.
  • Mark it aria-hidden — it is decorative, not real content.
// components/skeleton.tsx
export function Skeleton({ className = '' }: { className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`animate-pulse rounded-md bg-gray-200 ${className}`}
    />
  );
}

Matching the Final Layout

Build the skeleton by copying the structure of the real component, then replacing text and images with Skeleton boxes sized to match.

  • An avatar becomes a circle: h-10 w-10 rounded-full.
  • A title line becomes a wide bar; a subtitle becomes a shorter, thinner bar.
  • Use the same container classes (padding, gap, border) as the real card.
// components/user-card-skeleton.tsx
import { Skeleton } from './skeleton';

export function UserCardSkeleton() {
  return (
    <div className="flex items-center gap-4 rounded-lg border p-4">
      <Skeleton className="h-10 w-10 rounded-full" />
      <div className="flex-1 space-y-2">
        <Skeleton className="h-4 w-1/3" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  );
}

Lists: Repeat the Row Skeleton

For lists and tables, render a fixed count of row skeletons — enough to fill the typical viewport so the page looks complete.

  • Reuse the single-row skeleton inside an array.
  • Pick a count that roughly matches your usual page size (e.g. 6–8 rows).
  • Keep the same gap and wrapper as the real list to preserve spacing.
// components/user-list-skeleton.tsx
import { UserCardSkeleton } from './user-card-skeleton';

export function UserListSkeleton({ rows = 6 }: { rows?: number }) {
  return (
    <div className="space-y-3">
      {Array.from({ length: rows }).map((_, i) => (
        <UserCardSkeleton key={i} />
      ))}
    </div>
  );
}

Wiring the Skeleton into loading.tsx

Now loading.tsx just composes your skeleton components inside the same outer layout as the page. The header that is static (not data-dependent) can be rendered for real even in the loading state.

  • Render the real, instant parts (page title, tabs).
  • Swap only the data-bound regions for skeletons.
  • This gives a page that feels half-loaded already.
// app/dashboard/users/loading.tsx
import { UserListSkeleton } from '@/components/user-list-skeleton';

export default function Loading() {
  return (
    <section className="mx-auto max-w-2xl p-6">
      <h1 className="mb-4 text-2xl font-bold">Users</h1>
      <UserListSkeleton rows={6} />
    </section>
  );
}

loading.tsx vs Component-Level Suspense

loading.tsx covers the whole segment — if any data on the page is slow, the entire fallback shows. Sometimes you want finer control so fast content paints first.

  • Use loading.tsx for the segment-wide first paint.
  • Wrap individual slow components in <Suspense> with their own skeleton fallback to stream them independently.
  • Combine both: a light segment skeleton, plus granular Suspense for the slowest widget.
// app/dashboard/page.tsx
import { Suspense } from 'react';
import { RevenueChart } from './revenue-chart';
import { ChartSkeleton } from './chart-skeleton';

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Overview</h1>
      {/* Static + fast content paints immediately */}
      <Suspense fallback={<ChartSkeleton />}>
        {/* Slow async server component streams in later */}
        <RevenueChart />
      </Suspense>
    </main>
  );
}

Pure Function for Skeleton Counts

How many skeleton rows should you show? A small helper keeps it consistent and clamps to a sane range so you never render an absurd number of placeholders.

This logic is plain TypeScript — no framework involved — so you can unit-test it in isolation.

function skeletonRowCount(pageSize: number, viewportRows = 8): number {
  if (!Number.isFinite(pageSize) || pageSize <= 0) return viewportRows;
  return Math.min(pageSize, viewportRows);
}

console.log(skeletonRowCount(20));  // 8  (clamped to viewport)
console.log(skeletonRowCount(3));   // 3  (fewer items than viewport)
console.log(skeletonRowCount(0));   // 8  (fallback default)
console.log(skeletonRowCount(-5));  // 8  (guards invalid input)

Accessibility & Reduced Motion

Skeletons are decorative, but they still affect assistive tech and motion-sensitive users.

  • Mark the loading region with aria-busy="true" and individual placeholders with aria-hidden="true".
  • Provide a visually-hidden status like <span className="sr-only">Loading users</span> for screen readers.
  • Respect prefers-reduced-motion so the pulse animation does not run for users who opt out.
/* globals.css */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse {
    animation: none;
  }
}

Common Pitfalls

Avoid these mistakes that defeat the purpose of a skeleton:

  • Spinner-only fallback: gives no layout cue and guarantees a shift when content arrives.
  • Mismatched sizes: if the skeleton card is 60px tall but the real card is 96px, the page still jumps.
  • Forgetting the wrapper: different padding/grid between skeleton and page shifts everything.
  • Skeleton over fast data: if a segment loads in <100ms, the flash of skeleton can feel worse — consider component-level Suspense for only the slow parts.

Quick Check

Test your understanding of route-level loading states and skeletons.

İnteraktif derste cevapla

Recap

You learned how to craft meaningful loading states in the App Router:

  • loading.tsx is an automatic Suspense fallback for its route segment.
  • Build skeletons from a small Skeleton primitive and compose them to mirror the final layout.
  • Match wrappers, counts, and dimensions to avoid layout shift (CLS).
  • Render instant static parts (titles, tabs) for real; skeleton only the data-bound regions.
  • Use loading.tsx for segment-wide first paint and component-level <Suspense> to stream slow widgets independently.
  • Handle accessibility with aria-busy, aria-hidden, an sr-only status, and prefers-reduced-motion.
Başlamak ücretsiz

Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
22
Dersler
88
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Anlamlı loading.tsx ve İskeletler Oluşturma” dersi ücretsiz mi?

Evet — “Anlamlı loading.tsx ve İskeletler Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

“Anlamlı loading.tsx ve İskeletler Oluşturma” dersinde ne öğreneceğim?

Kaymayı önlemek için son yerleşimle eşleşen rota düzeyinde yükleme durumları ve iskelet yer tutucuları oluşturun. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Anlamlı loading.tsx ve İskeletler Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Suspense Sınırları ve Bileşen Düzeyinde Akış
  2. Anlamlı loading.tsx ve İskeletler Oluşturma
  3. Kısmi Önceden Oluşturma: Statik Kabuk, Dinamik Boşluklar
  4. Akıştaki Sorunlar: Yerleşim Kayması ve Şelaleler
← Next.js 15 Fullstack (App Router + Server Actions) Sayfasına Dön