nicer animation

Author: edeetee

src/components/css/main/index.module.css

@@ -38,9 +38,9 @@
     backdrop-filter: blur(16px);
     box-sizing: border-box;
     margin-top: 32px;
-    margin-bottom: 16px;
+    margin-bottom: 32px;
     padding: 32px 48px;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .7);
+    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .7);
 }
 
 .separator {

src/components/css/main/index.tsx

@@ -38,6 +38,7 @@ export const Main: React.FC = () => {
 
     const [selectedPage, selectPage] = useState<PageInfo | null>(initial_page || null)
     const [showExtra, setShowExtra] = useState(false);
+    const lastSelectedPage = useRef(selectedPage);
 
     const contentRef = useRef<HTMLDivElement>(null)
     const [initialRenderComplete, setInitialRenderComplete] = React.useState(false);
@@ -52,6 +53,10 @@ export const Main: React.FC = () => {
 
     //copy state to history on page change
     useEffect(() => {
+        if (selectedPage != null) {
+            lastSelectedPage.current = selectedPage;
+        }
+
         window.history.pushState({}, "", selectedPage?.url ?? "/");
     }, [selectedPage]);
 
@@ -129,7 +134,7 @@ export const Main: React.FC = () => {
 
             {!initialRenderComplete ? null : <Expandable expanded={showContent}>
                 <div ref={contentRef} className={styles.content}>
-                    <div className="not-print">{selectedPage?.page}</div>
+                    <div className="not-print">{selectedPage?.page ?? lastSelectedPage?.current?.page}</div>
                     <div className="print-only">{selectedPage?.page}</div>
                 </div>
             </Expandable>}