Update ModernTimeline

package.json

@@ -21,6 +21,7 @@
         "axios": "^1.7.2",
         "buffer": "^6.0.3",
         "classnames": "^2.5.1",
+        "framer-motion": "^11.2.10",
         "intersection-observer": "^0.12.2",
         "keen-slider": "^6.8.6",
         "moment-timezone": "^0.5.45",

src/app/(page)/albums/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 import styles from '@/components/Albums/Albums.module.scss';
 import SlideMultipleItems from '@/components/Albums/Slider/Slider';
+import HeartLoader from '@/components/Loader/HeartLoader';
 import Timeline from '@/components/Timeline/Timeline';
 import { get } from '@/libs/axiosConfig';
 import { fetchDataMoments } from '@/libs/fetchData';
@@ -24,8 +25,13 @@ export default function Albums(params: AlbumsProps) {
         dispatch(findAllListImageByYears({ years: 2023 }));
         dispatch(findAllListImageByYears({ years: 2024 }));
     }, [dispatch]);
+
     return isLoading ? (
-        <div>Lỗi đang tải...</div>
+        <div id="albums-scroll" className={cx('albums')}>
+            <div className={cx('relative w-full h-full flex items-center justify-center')}>
+                <HeartLoader />
+            </div>
+        </div>
     ) : (
         <div id="albums-scroll" className={cx('albums')}>
             <div className={cx('albums-outstanding')}>

src/app/(page)/layout.tsx

@@ -3,16 +3,17 @@ import BackToTopButton from '@/components/BackToTop/BackToTop';
 import Footer from '@/components/common/Footer/Footer';
 import Header from '@/components/common/Header/page';
 import HeartCreator from '@/components/Home/HeartCreator';
+import LoadingPage from '@/components/Loader/LoadingPage';
 import { useAppDispatch, useAppSelector } from '@/libs/hook';
 import { initHearts } from '@/redux/features/heartSlice';
 import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function ComponentConnectLayout({ children }: { children: React.ReactNode }) {
     const pathname = usePathname();
     const selector = useAppSelector((state) => state.heart);
     const dispatch = useAppDispatch();
-
+    const [isOpenPage, setOpenPage] = useState(false);
     useEffect(() => {
         if (typeof window !== 'undefined') {
             const isRemoveHearts = localStorage.getItem('isRemoved');
@@ -29,12 +30,20 @@ export default function ComponentConnectLayout({ children }: { children: React.R
     return pathname === '/albums' ? (
         children
     ) : (
-        <>
-            <Header />
-            {children}
-            {selector.status ? <HeartCreator /> : ''}
-            <BackToTopButton />
-            <Footer />
-        </>
+        <LoadingPage
+            isState={(e) => {
+                setOpenPage(e);
+            }}
+        >
+            {isOpenPage && (
+                <>
+                    <Header />
+                    {children}
+                    {selector.status ? <HeartCreator /> : ''}
+                    <BackToTopButton />
+                    <Footer />
+                </>
+            )}
+        </LoadingPage>
     );
 }