Merge pull request #101 from ErickLimaS/loading-page-fix

fix: Server Side Loading Page Problems
ErickLimaS · Jun 28, 2024 · ef9ccef · ef9ccef
2 parents 77440ff + a796bad
commit ef9ccef
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 35 deletions.
diff --git a/app/components/LoadingContainer/component.module.css b/app/components/LoadingContainer/component.module.css
@@ -0,0 +1,55 @@
+#container {
+
+    display: flex;
+
+    margin: auto;
+
+    height: 80vh;
+    width: 100%;
+
+    animation: forwards showUp 450ms;
+
+}
+
+@keyframes showUp {
+
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+
+}
+
+#content_container {
+
+    margin: auto;
+
+    display: flex;
+    flex-direction: column;
+
+}
+
+#content_container #img_container {
+
+    position: relative;
+
+    aspect-ratio: 1117/393;
+
+    width: 80vw;
+    max-width: 200px;
+
+}
+
+#content_container>p {
+
+    margin: auto;
+    margin-top: 16px;
+
+    font-size: var(--font-size--h5);
+    color: var(--white-50);
+    font-weight: 600;
+
+}
diff --git a/app/components/LoadingContainer/index.tsx b/app/components/LoadingContainer/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import LoadingSvg from "@/public/assets/Eclipse-1s-200px.svg"
+import Image from 'next/image'
+import Logo from "@/public/logo.png"
+import styles from "./component.module.css"
+
+function LoadingPageContainer() {
+
+    return (
+        <div id={styles.container}>
+            <div id={styles.content_container}>
+
+                <div id={styles.img_container}>
+                    <Image fill alt="Logo" src={Logo} />
+                </div>
+
+                <LoadingSvg width={64} height={82} alt="Loading" />
+
+                <p>
+                    Loading...
+                </p>
+
+            </div>
+        </div>
+    )
+}
+
+export default LoadingPageContainer
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -29,10 +29,10 @@ export default function RootLayout({
 
       <body className={inter.className}>
 
-        <Analytics />
+        <Analytics /> {/* Vercel */}
 
         <StoreProvider>
-          
+
           <Header />
 
           <NextTopLoader

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -1,34 +1,5 @@
-import React, { DetailedHTMLProps, HTMLAttributes } from 'react'
-import LoadingSvg from "@/public/assets/Eclipse-1s-200px.svg"
-import Image from 'next/image'
-import Logo from "@/public/logo.png"
+import LoadingPageContainer from "@/app/components/LoadingContainer";
 
-const imgContainerStyles = {
-    position: "relative",
-    aspectRatio: "1117 / 393",
-    width: "80vw",
-    maxWidth: "200px"
-} as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-
-function LoadingPlaceholder() {
-
-    return (
-        <div style={{ height: "80vh", width: "100%", margin: "auto", display: "flex" }}>
-            <div style={{ margin: "auto", display: "flex", flexDirection: "column" }}>
-
-                <div style={imgContainerStyles}>
-                    <Image fill alt="Logo" src={Logo} />
-                </div>
-
-                <LoadingSvg width={64} height={82} alt="Loading" />
-
-                <p style={{ margin: "auto", marginTop: "16px", fontSize: "var(--font-size--h5)", color: "var(--white-50)", fontWeight: 600 }}>
-                    Loading...
-                </p>
-
-            </div>
-        </div>
-    )
-}
-
-export default LoadingPlaceholder
+export default function Loading() {
+    return <LoadingPageContainer />
+}
diff --git a/app/media/[id]/loading.tsx b/app/media/[id]/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingPageContainer from "@/app/components/LoadingContainer";
+
+export default function Loading() {
+    return <LoadingPageContainer />
+}
diff --git a/app/news/loading.tsx b/app/news/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingPageContainer from "@/app/components/LoadingContainer";
+
+export default function Loading() {
+    return <LoadingPageContainer />
+}
diff --git a/app/read/[id]/loading.tsx b/app/read/[id]/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingPageContainer from "@/app/components/LoadingContainer";
+
+export default function Loading() {
+    return <LoadingPageContainer />
+}
diff --git a/app/watch/[id]/loading.tsx b/app/watch/[id]/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingPageContainer from "@/app/components/LoadingContainer";
+
+export default function Loading() {
+    return <LoadingPageContainer />
+}