feat: added loading and error page

frontend/src/components/ErrorPage.tsx

+import Header from './Header';
+
+export const ErrorPage = () => {
+  return (
+    <div>
+      <Header/>
+    <div>
+      An error occurred.
+  </div>
+  </div>
+);
+};
+
+export default ErrorPage;

frontend/src/components/LandingPage.tsx

@@ -2,12 +2,14 @@ import useSWR from 'swr';
 import Header from './Header';
 import MovieCard from './MovieCard';
 import { MovieCardMode, MovieDto } from '../models/types';
+import LoadingPage from './LoadingPage';
+import ErrorPage from './ErrorPage';
 
 export const LandingPage = () => {
   const { data, error } = useSWR<MovieDto[]>('movies');
 
-  if (error) return <div>failed to load</div>;
-  if (!data) return <div>loading...</div>;
+  if (error) return <ErrorPage />;
+  if (!data) return <LoadingPage />;
 
   return (
     <div className="h-screen">

frontend/src/components/LoadingPage.tsx

+import Header from './Header';
+
+export const LoadingPage = () => {
+  return (
+    <div>
+      <Header/>
+      <div>
+        Data is loading...
+      </div>
+    </div>
+  );
+};
+
+export default LoadingPage;

frontend/src/components/Movie.tsx

@@ -9,6 +9,8 @@ import useSWR from 'swr';
 import { getToken, getUser } from '../services/auth';
 import formatDuration from '../services/formatDuration';
 import Review from './Review';
+import LoadingPage from './LoadingPage';
+import ErrorPage from './ErrorPage';
 
 function getAverageRating(review: any) {
   return (review.actingRating + review.ideaRating + review.scriptRating + review.musicRating + review.visualsEditRating) / 5;
@@ -39,8 +41,8 @@ export const Movie = () => {
   const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR<ReviewDto[]>(`reviews/search/${id}`);
   const { data: recommended, error: recommendedError } = useSWR<MovieDto[]>(`movies/${id}/recommended`);
 
-  if (movieError || reviewError || recommendedError) return <div>failed to load</div>;
-  if (!movie || !reviews || !recommended) return <div>loading...</div>;
+  if (movieError || reviewError || recommendedError) return <ErrorPage />;
+  if (!movie || !reviews || !recommended) return <LoadingPage />;
 
   const recommendedMovies = recommended.slice(0, 5);
 

frontend/src/components/Pages.tsx

@@ -13,7 +13,7 @@ export const Pages = () => (
         <Route path="pa165" element={<LandingPage/>}/>
         <Route path="pa165/movie/:id" element={<Movie/>}/>
         <Route path="pa165/login" element={<Login/>}/>
-        <Route path="*" element={<PageNotFound />}/>
+        <Route path="*" element={<PageNotFound/>}/>
       </Routes>
     </BrowserRouter>
   </SWRConfig>