Status Navigasi di React Router

Jika kita mengklik produk dalam daftar, kita melihat bahwa untuk pertama kalinya halaman produk dimuat dengan penundaan, dan selanjutnya sudah cepat, hal yang sama terjadi saat menambah dan memperbarui produk, karena kita memiliki cache di sisi klien.

Dalam pelajaran ini, kita akan menunjukkan kepada pengguna dalam status apa halaman kita berada. Dalam hal ini, kita dapat dibantu oleh hook useNavigation. Hasil kerja hook ini mengeluarkan objek dengan serangkaian properti. Kita akan tertarik pada salah satunya - properti state.

Properti state dapat memiliki 3 nilai: 'idle' (tidak ada yang terjadi), 'submitting' (saat mengirim formulir melalui POST, PUT, PATCH atau DELETE, action rute dipanggil), 'loading' (saat loader untuk rute berikutnya dipanggil, untuk merender halaman berikutnya). Kita akan tertarik pada nilai terakhir.

Mari masuk ke file root.jsx dan impor hook ini:

import { useNavigation } from 'react-router-dom';

Kemudian, untuk hasil yang dikembalikan oleh hook, buat variabel navigation dalam fungsi Root - sebelum return:

const { products } = useLoaderData();
const navigation = useNavigation();

Dan sekarang mari kita gunakan propertinya state, jika nilainya adalah 'loading', maka kita akan mengatur kelas loading untuk div, di mana proses rendering data produk kita terjadi:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

Tinggal menambahkan gaya untuk kelas loading di index.css. Mari dalam kasus status loading, kita hanya akan meningkatkan opacity:

div.loading {
	opacity: 0.3;
}

Sekarang, jika, dengan memuat ulang situs, mengklik produk dalam daftar atau, misalnya, menambah produk baru, kita akan melihat bahwa halaman saat ini untuk sementara akan memudar, sebelum halaman berikutnya muncul.

Ambil aplikasi yang dibuat oleh Anda dalam tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, dengan bantuan hook useNavigation, buatlah agar pengguna dapat melihat bahwa halaman berikutnya dengan data siswa sedang dimuat.