diff --git a/src/components/App.jsx b/src/components/App.jsx index 4227a1e..13428d1 100644 --- a/src/components/App.jsx +++ b/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 ( diff --git a/src/components/sharedLayout/SharedLayout.jsx b/src/components/sharedLayout/SharedLayout.jsx index ec9d010..e3ce850 100644 --- a/src/components/sharedLayout/SharedLayout.jsx +++ b/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; diff --git a/src/pages/movieDetails/MovieDetails.jsx b/src/pages/movieDetails/MovieDetails.jsx index 31274d7..d3030a7 100644 --- a/src/pages/movieDetails/MovieDetails.jsx +++ b/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 = () => {
- Loading...}> - - + ); };