Improve loader behaviour, add loading text

iaincollins · Sep 9, 2024 · 2615dc8 · 2615dc8
1 parent a3b70cb
commit 2615dc8
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 11 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -4,6 +4,7 @@ import Head from 'next/head'
 export default ({
   title = 'Ardent Industry – Trade & Exploration',
   loading = false,
+  loadingText,
   children
 }) =>
   <>
@@ -14,6 +15,6 @@ export default ({
       <meta name='author' content='Iain Collins' />
       <meta name='viewport' content='width=device-width' />
     </Head>
-    <Loader visible={loading} />
+    <Loader visible={loading} text={loadingText} />
     {children}
   </>
diff --git a/components/loader.js b/components/loader.js
@@ -1,7 +1,7 @@
-export default function Loader ({ visible }) {
+export default function Loader ({ visible, text}) {
   return (
     <>
-      {/* <div className='loader__background' style={{ opacity: visible ? 1 : 0 }} /> */}
+      <div className='loader__background' style={{ opacity: visible ? 1 : 0 }} />
       <div className='loader__spinner' style={{ opacity: visible ? 1 : 0 }}>
         <div className='loader__row'>
           <div className='loader__arrow loader__arrow--outer-18' />
@@ -36,6 +36,7 @@ export default function Loader ({ visible }) {
           <div className='loader__arrow loader__arrow--down loader__arrow--outer-9' />
         </div>
       </div>
+      {text && <div className='loader__text' style={{ opacity: visible ? 1 : 0 }}>{text}</div>}
     </>
   )
 }

diff --git a/css/components/loader.css b/css/components/loader.css
@@ -1,7 +1,7 @@
 /* CSS specific to the loader animation */
 
 .loader__spinner {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 0;
   width: 100%;
@@ -17,7 +17,7 @@
 }
 
 .loader__spinner::before {
-  position: absolute;
+  position: fixed;
   top: -1.8rem;
   height: 9rem;
   width: 9rem;
@@ -28,14 +28,36 @@
   filter: blur(3rem);
 }
 
+.loader__text {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  margin-top: 4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  zoom: 1.5;
+  transition: .25s ease-in-out;
+  z-index: 3000;
+  pointer-events: none;
+  text-align: center;
+  text-shadow: 0 0 .5rem #000;
+  font-family: 'Jura';
+  font-synthesis: weight;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: .8rem;
+}
+
 .loader__background {
   z-index: 2999;
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0,0,0,.05);
+  background: rgba(0,0,0,.5);
   backdrop-filter: blur(.05rem);
   box-shadow: inset 0 0 10rem rgba(0,0,0,.5);
   border-radius: .2rem;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.45.3",
+  "version": "0.45.4",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodities.js b/pages/commodities.js
@@ -27,7 +27,7 @@ export default () => {
   }, [])
 
   return (
-    <Layout loading={commodities === undefined}>
+    <Layout loading={commodities === undefined} loadingText='Loading commodities…'>
       <Head>
         <link rel='canonical' href='https://ardent-industry.com/commodities' />
       </Head>

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -109,7 +109,7 @@ export default () => {
   }, [])
 
   return (
-    <Layout loading={commodity === undefined || imports === undefined || updating}>
+    <Layout loading={commodity === undefined || imports === undefined || updating} loadingText={'Loading trade data…'}>
       <Head>
         <link rel='canonical' href={`https://ardent-industry.com/system/${commodity?.symbol}/${tabs[tabIndex]}`} />
       </Head>

diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
@@ -154,7 +154,7 @@ export default () => {
   }, [router.query['system-name']])
 
   return (
-    <Layout loading={system === undefined}>
+    <Layout loading={system === undefined} loadingText='Loading system data…'>
       <Head>
         <link rel='canonical' href={`https://ardent-industry.com/system/${system?.systemName}/${tabs[tabIndex]}`} />
       </Head>