FluentStack

loading.tsx

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced55 menitBahasa Indonesia

loading.tsx

Menambahkan loading UI ringan pada route segment agar navigasi tidak terasa diam saat content sedang disiapkan.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan fungsi loading.tsx pada route segment App Router
  • Menempatkan loading UI di folder route yang tepat
  • Membuat fallback yang memberi konteks, bukan spinner tanpa makna
Next.jsApp RouterLoading UIRoute Segments

Isi lesson

5 blok
  1. 1.
    Tunjukkan bahwa route sedang meresponsBelum selesaiWajib
  2. 2.
    Fallback untuk route coursesBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Tunjukkan bahwa route sedang merespons

Wajib

Saat user berpindah ke route yang content-nya belum siap, halaman yang tampak diam terasa seperti aplikasi tidak merespons. File khusus loading.tsx memberi Next.js fallback UI untuk satu route segment. Letakkan file itu di folder segment yang ingin kamu lindungi, misalnya app/courses/loading.tsx untuk route /courses dan child route di bawahnya.

Loading UI bukan tempat untuk meniru seluruh page secara sempurna. Tampilkan struktur ringan yang memberi orientasi: judul, daftar item, atau skeleton yang mendekati content berikutnya. Pada tahap ini, fokus pada penempatan file dan pesan yang berguna; kita tidak membahas strategi streaming atau cache yang lebih dalam.

Bagian ini memengaruhi progres lesson.

Fallback untuk route courses

Wajib
tsx
// app/courses/loading.tsx
export default function Loading() {
  return (
    <section aria-busy="true" aria-label="Memuat daftar course">
      <h1>Course</h1>
      <p>Menyiapkan daftar course untukmu...</p>
      <ul aria-hidden="true">
        <li>Memuat item course</li>
        <li>Memuat item course</li>
        <li>Memuat item course</li>
      </ul>
    </section>
  );
}

Nama file dan lokasi membuatnya menjadi loading UI untuk segment courses. Component Loading tidak perlu props dan tidak perlu "use client" hanya untuk menampilkan fallback ini. aria-busy memberi sinyal bahwa area tersebut sedang diperbarui, sedangkan teks membuat status tetap mudah dipahami tanpa mengandalkan animasi saja.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course loading UI

Lengkapi app/courses/loading.tsx sebagai fallback ringan yang memberi konteks saat daftar course sedang disiapkan.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

File mana yang paling tepat untuk menampilkan fallback saat route /courses sedang menyiapkan content?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • loading.tsx memberi fallback UI untuk route segment dan child route-nya.
  • Letakkan file di folder segment yang membutuhkan loading UI.
  • Gunakan fallback ringan yang memberi konteks tentang content yang sedang disiapkan.
  • Berikutnya, kamu akan menangani situasi ketika route tidak dapat merender content seperti yang diharapkan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tunjukkan bahwa route sedang merespons.

Memuat progresReview module