Improve page flickering

CHANGELOG.md

@@ -1,3 +1,8 @@
+## Version 1.2.1 (November 2025)
+
+ - Added cookie reader function.
+ - Improved CSS to help hide page flickering.
+
 ## Version 1.2.0 (November 2025)
 
  - Added a cookie for improved data loading speed.

README.md

@@ -1,6 +1,6 @@
 # My Website
 ### Released August 2025
-### Version 1.2.0
+### Version 1.2.1
 ### Updated November 2025
 
 <br/>

cookie-reader.js

@@ -0,0 +1,17 @@
+export function readCookie(name) {
+    let cookies = document.cookie.split("; ");
+    for (let i in cookies) {
+        const cookie = cookies[i];
+        if (cookie.startsWith(name + "=")) {
+            const cookieValue = cookie.replace(name + "=", "").trim();
+            if (cookieValue.length < 100) {
+                console.log("Cookie " + name + ": " + cookieValue);
+            } else {
+                console.log("Cookie " + name + " length: " + cookieValue.length);
+            }
+            return cookieValue;
+        }
+    }
+    console.log("Cookie " + name + " not found.")
+    return "";
+}

data-loader.js

@@ -106,12 +106,9 @@ async function loadData() {
 
     // Attempting to Read Cookies
 
-    let cookie;
+    let cookie = readCookie("projects");
 
-    if (document.cookie.indexOf("projects=") != -1) {
-
-        cookie = document.cookie.split(";")[1].replace("projects=", "").trim();
-        console.log("Projects Cookie: " + cookie);
+    if (cookie != "") {
 
         let cookie_sections = cookie.split("_");
         let i = 0;
@@ -155,8 +152,6 @@ async function loadData() {
 
         // Getting Data on Projects
 
-        cookie = "";
-
         for (let i in projects) {
 
             let project = projects[i]
@@ -376,6 +371,10 @@ async function loadData() {
 
 const startTime = new Date();
 
+// Import Cookie Reader
+
+import { readCookie } from "./cookie-reader.js";
+
 // Load Data
 
 const responses = await loadData();

element-loader.js

@@ -4,12 +4,14 @@ const startTime = new Date();
 
 // Attempting to Read Cookie
 
+import { readCookie } from "./cookie-reader.js";
+
+const elementsCookie = readCookie("elements");
 let text;
 
-if (document.cookie.indexOf("elements=") != -1) {
+if (elementsCookie != "") {
 
-    const cookie = document.cookie.split(";")[0].replace("elements=", "");
-    text = cookie.replaceAll("/n", "\n").replaceAll("?", " ")
+    text = elementsCookie.replaceAll("/n", "\n").replaceAll("?", " ")
         .replaceAll("^", ",").replaceAll("%", ";").trim();
 
 } else {
@@ -44,8 +46,9 @@ for (let i in elements) {
 // Getting Website Version Data
 
 let websiteVersion;
-if (document.cookie.indexOf("projects=") != -1) {
-    websiteVersion = document.cookie.split(";")[1].split("_")[6];
+const projectsCookie = readCookie("projects");
+if (projectsCookie != "") {
+    websiteVersion = projectsCookie.split("_")[6];
 } else {
     const { projects } = await import("/data-loader.js");
     websiteVersion = projects[2].version;

projects/biomegen/index.html

@@ -11,7 +11,7 @@
 
         <!--JavaScript Scripts-->
         <script type="module" src="/element-loader.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0"></script> 
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0"></script>
         <script type="module" src="/projects/biomegen/script.js"></script>
 
         <!--Tab Title-->

statistics/styles.css

@@ -19,6 +19,7 @@
     /* Display */
     display: inline-block;
     width: min(round(80%, 200px), 1000px);
+    min-height: 100px;
     padding: 20px;
     border-radius: 30px;
     background-color: var(--dark);
@@ -48,6 +49,7 @@
     /* Display */
     display: inline-block;
     width: max(70%, 400px);
+    min-height: 300px;
     padding: 30px;
     border-radius: 30px;
     margin: 20px 0;
@@ -81,6 +83,7 @@
     display: inline-block;
     vertical-align: top;
     width: max(40%, 400px);
+    min-height: 640px;
     padding: 20px;
     border-radius: 30px;
     margin: 20px;

styles.css

@@ -56,6 +56,10 @@ a {
     /* Text */
     text-align: center;
 }
+#first-header-loader {
+    /* Display */
+    height: 50px;
+}
 #first-header-released {
     /* Position */
     top: 10px;
@@ -97,16 +101,18 @@ a {
     height: 50px;
     padding-left: calc(50% - 250px);
     padding-right: calc(50% - 250px);
-    border: solid;
-    border-width: 0 0 2px 0;
-    border-color: var(--off-white);
-    background-color: var(--darkest);
 }
 #second-header-loader {
     /* Position */
     position: sticky;
     top: 0;
     z-index: 2;
+    /* Display */
+    height: 50px;
+    border: solid;
+    border-width: 0 0 2px 0;
+    border-color: var(--off-white);
+    background-color: var(--darkest);
 }
 
 /* Sidebar */