Merge pull request #276 from teaxyz/placeholders

Pre-loader for 'slow-to-load' elements on site

src/assets/scripts/bottles.jsx

@@ -1,12 +1,24 @@
 function Bottles() {
   const [bottles, setBottles] = React.useState();
+  const [isLoading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
     fetch("https://app.tea.xyz/api/bottles")
       .then((res) => res.json())
-      .then((res) => setBottles(res));
+      .then((res) => {
+        setBottles(res);
+        setLoading(false);
+      });
   }, []);
 
+  if (isLoading) return (
+    <div id="bottle-preloader" className="flex">
+      <div id="bottle-status" className="my-auto">
+        <i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+        <div id="bottle-loading-text"><p className="grid-gray">steeping...</p></div>
+      </div>
+    </div>
+  );
   if (!bottles) return null;
 
   const names = [...new Set(bottles.map((b) => b.name))];

src/assets/scripts/package-bottles.jsx

@@ -1,13 +1,28 @@
 function PackageBottles() {
   const [bottles, setBottles] = React.useState();
+  const [isLoading, setIsLoading] = React.useState(true);
 
   React.useEffect(() => {
     const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
     fetch(url)
       .then((res) => res.json())
-      .then((res) => setBottles(res));
+      .then((res) => {
+        setBottles(res);
+        setIsLoading(false);
+      });
   }, []);
 
+  if (isLoading) return (
+    <div id="bottle-preloader" className="flex one-box-down">
+      <div id="bottle-status" className="flex justifit-content-center">
+        <div className="mx-auto">
+          <i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+          <div id="bottle-loading-text"><p className="grid-gray">steeping available versions...</p></div>
+        </div>
+      </div>
+    </div>
+  );
+
   if (!bottles) return null;
 
   const names = [...new Set(bottles.map((b) => b.name))];

src/layouts/index.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+{{- partial "preloader.html" -}}
+
 <!-- Hero Section -->
 
 {{- partial "mobile-art-home" -}}

src/layouts/page/bottles.html

@@ -40,6 +40,36 @@
   .expand{
     cursor: pointer;
   }
+    .tea-icon{
+      display:block;
+      text-align:center;
+      animation: pulse 1s infinite;
+    }
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+    #bottle-preloader {
+      width: 100%;
+      height: 200px;
+      background: #1a1a1a;
+
+    }
+    #bottle-status {
+      width: 200px;
+      height: 200px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      background-position: center;
+      margin: -100px 0 0 -100px;
+    }
+    #bottle-loading-text {
+      font-size: 20px;
+      text-align: center;
+      animation: pulse 1s infinite !important;
+    }
 
   @media screen and (max-width: 576px) {
 
@@ -56,7 +86,6 @@
 
     .title-col{
       padding: 4vw !important;
-
     }
 
   }

src/layouts/page/package-detail.html

@@ -94,6 +94,34 @@
     cursor: pointer;
   }
 
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  #bottle-preloader {
+    width: 100%;
+    height: 200px;
+    background: #1a1a1a;
+    border: 1px solid #949494;;
+  }
+  #bottle-status {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    background-position: center;
+  }
+  #bottle-loading-text {
+    font-size: 20px;
+    text-align: center;
+    animation: pulse 1s infinite !important;
+  }
+
   @media screen and (max-width: 576px) {
 
     .bottles-container{

src/layouts/partials/bottle-preloader.html

@@ -0,0 +1,45 @@
+<div id="bottle-preloader" class="flex">
+  <div id="bottle-status" class="justify-content-center mx-auto">
+    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+    <div id="bottle-loading-text"><p class="grid-gray">steeping...</p></div>
+  </div>
+</div>
+
+<style>
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  #bottle-preloader {
+    width: 100%;
+    height: 200px;
+    background: #1a1a1a;
+  }
+  #bottle-status {
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-position: center;
+    margin: -100px 0 0 -100px;
+  }
+  #bottle-loading-text {
+    font-size: 20px;
+    text-align: center;
+    animation: pulse 1s infinite !important;
+  }
+</style>
+
+<script>
+  $(window).on('load', function() {
+    $('#status').fadeOut();
+    $('#preloader').delay(350).fadeOut('slow');
+  });
+</script>

src/layouts/partials/preloader.html

@@ -0,0 +1,49 @@
+<div id="preloader">
+  <div id="status">
+    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+    <div id="loading-text"><p class="grid-gray">steeping...</p></div>
+  </div>
+</div>
+
+<style>
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  #preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #1a1a1a;
+    z-index: 9999;
+  }
+  #status {
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-position: center;
+    margin: -100px 0 0 -100px;
+  }
+  #loading-text {
+    font-size: 20px;
+    text-align: center;
+    animation: pulse 1s infinite;
+  }
+</style>
+
+<script>
+  $(window).on('load', function() {
+    $('#status').fadeOut();
+    $('#preloader').delay(350).fadeOut('slow');
+  });
+</script>