performance: preload background image during loading screen

ChristoGrab · Jun 12, 2023 · d099781 · d099781
1 parent 5493e80
commit d099781
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="./favicon.png" />
+    <link rel="preload" as="image" href="./images/night-sky.webp">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/components/InfoCard/InfoCard.css b/src/components/InfoCard/InfoCard.css
@@ -3,12 +3,12 @@
   top: 15%;
   right: 2%;
   background: #13080e;
-  border: 2px solid #e8ab8c;
+  border: 2px solid var(--space-orange);
   height: clamp(300px, 48vh, 600px);
   width: clamp(200px, 20%, 400px);
   z-index: 10;
   border-radius: 10px;
-  box-shadow: 1px 1px 10px #e8ab8c inset;
+  box-shadow: 1px 1px 10px var(--space-orange) inset;
   animation: fadeIn 2s linear;
   display: flex;
   flex-direction: column;
@@ -29,7 +29,7 @@
   position: relative;
   background-color: #e8ab8c;
   border: none;
-  color: white;
+  color: #ffffff;
   height: 40px;
   width: clamp(40px, 50px, 50px);
   font-weight: bold;
@@ -45,7 +45,7 @@
 
 .infocard-back-button::before {
   content: "";
-  background-color: white;
+  background-color: #ffffff;
   width: 100%;
   height: 100%;
   position: absolute;

diff --git a/src/components/LoadingScreen/LoadingScreen.css b/src/components/LoadingScreen/LoadingScreen.css
@@ -1,26 +1,33 @@
 .loading-screen {
-  background: var(--);
+  height: 100vh;
+  width: 100vw;
+  background: var(--menu-brown);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
-.loading-text {
-
+.loading-title, .loading-text, .loading-subtitle {
+  color: var(--space-orange);
+  font-family: "SpaceFont";
 }
 
 .loading-bar {
-  width: 200px;
-  height: 35px;
-  background: var(--space-black);
+  width: 15em;
+  height: 2em;
   border: 2px solid var(--space-orange);
   border-radius: 5px;
   margin: 0 auto;
   margin-top: 20px;
   position: relative;
 }
 
+.loading-text {
+  font-size: 1em;
+  margin-top: 1em;
+}
+
 .loading-bar::before {
   content: '';
   position: absolute;

diff --git a/src/components/LoadingScreen/index.js b/src/components/LoadingScreen/index.js
@@ -1,12 +1,18 @@
 import { useState } from "react";
 import "./LoadingScreen.css";
 
+// This loading screen will be displayed for 3 seconds when the app is first loaded
+// This gives the app time to load the assets to avoid the white flash on first load
+
 const LoadingScreen = () => {
 
+  // Some flavor text to display while the app is loading
   const loadingText = ["Fetching planetary data...", "Parsing atmospheric variables...", "Populating universe..."];
 
+  // A state variable to hold the index of the loading text
   const [loadingTextIndex, setLoadingTextIndex] = useState(0);
 
+  // A timeout to change the loading text every second
   setTimeout(() => {
     if (loadingTextIndex < 2) setLoadingTextIndex(loadingTextIndex + 1);
     else setLoadingTextIndex(0);
@@ -16,7 +22,7 @@ const LoadingScreen = () => {
     <div className="loading-screen">
       <h1 className="loading-title">Welcome to Solarium</h1>
       <div className="loading-bar"></div>
-      <div className="loading-update">{loadingText[loadingTextIndex]}</div>
+      <div className="loading-text">{loadingText[loadingTextIndex]}</div>
     </div>
   )
 }

diff --git a/src/components/Viewport/Viewport.css b/src/components/Viewport/Viewport.css
@@ -9,6 +9,12 @@
   animation: rotate 500s infinite linear;
   display: flex;
   justify-content: flex-end;
+  transition: fadeFromBlack 1s;
+}
+
+@keyframes fadeFromBlack {
+  0% { background-color: black; }
+  100% { background-color: transparent; }
 }
 
 @keyframes rotate {