reduce background jumping

FairCrypto · May 22, 2024 · ee2766b · ee2766b
1 parent c359db5
commit ee2766b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,6 +1,8 @@
-export default function Footer() {
+export default function Footer({ isLoading = false }: { isLoading?: boolean }) {
   return (
-    <footer className="footer footer-center z-[2] mt-auto p-5 text-accent-content drop-shadow-xl shadow-xl bg-accent text-gray-700">
+    <footer
+      className={`footer footer-center z-[2] mt-auto p-5 text-accent-content drop-shadow-xl shadow-xl bg-accent text-gray-700 opacity-0 ${!isLoading && "fade-in"}`}
+    >
       <aside>
         <p className="font-bold">solXEN</p>
         <p>Copyright © 2024 - All right reserved</p>

diff --git a/app/globals.css b/app/globals.css
@@ -84,6 +84,11 @@ body {
   transition: opacity 0.3s ease-in-out;
 }
 
+.fade-in-fast {
+  opacity: 1;
+  transition: opacity 0.1s ease-in-out;
+}
+
 .fade-out {
   opacity: 0;
   transition: opacity 0.1s ease-in-out;

diff --git a/app/leaderboard/Background.tsx b/app/leaderboard/Background.tsx
@@ -12,6 +12,7 @@ export function Background({ isLoading }: BackgroundProps) {
       className="fixed h-full w-full left-0 top-0"
     >
       <Image
+        className={`opacity-0 ${!isLoading && "fade-in-fast"}`}
         alt="Background image"
         src="/background-image.jpg"
         fill

diff --git a/app/leaderboard/[slug]/page.tsx b/app/leaderboard/[slug]/page.tsx
@@ -101,7 +101,8 @@ export default function LeaderboardSlug({
           />
         </>
       )}
-      {!isLoading && <Footer />}
+
+      <Footer isLoading={isLoading} />
     </main>
   );
 }
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -113,7 +113,7 @@ export default function Leaderboard() {
         </div>
       </div>
 
-      {!isLoading && <Footer />}
+      <Footer isLoading={isLoading} />
     </main>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,7 +101,8 @@ export default function LeaderboardSlug({ @@
               />
             </>
           )}
-          {!isLoading && <Footer />}
+          <Footer isLoading={isLoading} />
         </main>
       );
     }