lazy() & Suspense refatoring

src/components/App.jsx

@@ -1,13 +1,16 @@
 import React, { lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-const Home = lazy(() => import('../pages/Home'));
-const Movies = lazy(() => import('../pages/Movies'));
-const MovieDetails = lazy(() => import('../pages/movieDetails/MovieDetails'));
+import Home from '../pages/Home';
+import Movies from '../pages/Movies';
+import MovieDetails from '../pages/movieDetails/MovieDetails';
+import SharedLayout from './sharedLayout/SharedLayout';
+import NotFoundPage from '../pages/NotFoundPage';
+
+//  Importurile dinamice (lazy()) trebuie facute DUPA importurile statice!
+
 const Cast = lazy(() => import('../pages/cast/Cast'));
 const Reviews = lazy(() => import('../pages/Reviews'));
-const SharedLayout = lazy(() => import('./sharedLayout/SharedLayout'));
-const NotFoundPage = lazy(() => import('../pages/NotFoundPage'));
 
 const App = () => {
   return (

src/components/sharedLayout/SharedLayout.jsx

@@ -34,4 +34,6 @@ const SharedLayout = () => {
   );
 };
 
+// Dacă folosim tehnica «shared layout», atunci Suspense trebuie plasat direct în componenta SharedLayout. În caz contrar, la fiecare încărcare a paginii, componentele comune a paginilor, cum ar fi header și navigation, vor dispărea și vor fi randate din nou.
+
 export default SharedLayout;

src/pages/movieDetails/MovieDetails.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, Outlet, useNavigate, useParams } from 'react-router-dom';
 import { fetchMovieDetails } from '../../services/api';
 import styles from './MovieDetails.module.css';
@@ -78,9 +78,7 @@ const MovieDetails = () => {
         </Link>
       </nav>
       <hr />
-      <Suspense fallback={<div>Loading...</div>}>
-        <Outlet />
-      </Suspense>
+      <Outlet />
     </div>
   );
 };