Κατάσταση πλοήγησης στο React Router

Αν κλικάρουμε σε προϊόντα στη λίστα, βλέπουμε ότι την πρώτη φορά η σελίδα με το προϊόν φορτώνεται με καθυστέρηση, ενώ στις επόμενες φορές γρήγορα, το ίδιο συμβαίνει και με την προσθήκη και την ενημέρωση προϊόντος, αφού έχουμε cache από την πλευρά του client.

Σε αυτό το μάθημα θα δείξουμε στον χρήστη σε ποια κατάσταση βρίσκεται η σελίδα μας. Σε αυτό μπορεί να μας βοηθήσει το hook useNavigation. Αποτέλεσμα της λειτουργίας του αυτού του hook είναι ένα αντικείμενο με μια σειρά από ιδιότητες. Θα μας ενδιαφέρει μία από αυτές - η ιδιότητα state.

Η ιδιότητα state μπορεί να έχει 3 τιμές: 'idle' (δεν συμβαίνει τίποτα), 'submitting' (όταν κατά την υποβολή φόρμας μέσω POST, PUT, PATCH ή DELETE καλείται το action της διαδρομής), 'loading' (όταν καλείται ο loader για την επόμενη διαδρομή, προκειμένου να αποδοθεί η επόμενη σελίδα). Θα μας ενδιαφέρει η τελευταία τιμή.

Ας πάμε στο αρχείο root.jsx και ας εισάγουμε αυτό το hook:

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

Στη συνέχεια, για το αποτέλεσμα που επιστρέφει το hook, θα δημιουργήσουμε μια μεταβλητή navigation στη συνάρτηση Root - πριν από το return:

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

Και τώρα ας χρησιμοποιήσουμε την ιδιότητα της state, αν αυτή είναι η τιμή 'loading', τότε θα ορίσουμε την κλάση loading για το div, στο οποίο γίνεται η απόδοση των δεδομένων του προϊόντος:

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

Απομένει να προσθέσουμε στυλ για την κλάση loading στο index.css. Ας ορίσουμε στην περίπτωση κατάστασης φόρτωσης απλά να αυξάνουμε την opacity:

div.loading {
	opacity: 0.3;
}

Τώρα, αν, ξαναφορτώνοντας τον ιστότοπο, κλικάρουμε σε προϊόντα στη λίστα ή, για παράδειγμα, προσθέσουμε ένα νέο προϊόν, θα δούμε ότι η τρέχουσα σελίδα για μια στιγμή θα γίνει πιο αδύναμη, πριν εμφανιστεί η επόμενη.

Πάρτε την εφαρμογή που δημιουργήσατε στα αποτελέσματα των προηγούμενων μαθημάτων. Χρησιμοποιώντας τα υλικά του μαθήματος, με τη βοήθεια του hook useNavigation κάντε έτσι ώστε ο χρήστης να μπορεί να δει ότι η επόμενη σελίδα με τα δεδομένα του φοιτητή φορτώνεται.