From ef74d4fc000bb61dc86def6fadccbc41ffc4bc8b Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 Jan 2023 13:36:42 -0500
Subject: [PATCH 01/16] Preloader added to bottles.jsx

---
 src/assets/scripts/bottles.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/assets/scripts/bottles.jsx b/src/assets/scripts/bottles.jsx
index d7c4eb1..2350288 100644
--- a/src/assets/scripts/bottles.jsx
+++ b/src/assets/scripts/bottles.jsx
@@ -1,12 +1,17 @@
 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 <p>Loading...</p>;
   if (!bottles) return null;
 
   const names = [...new Set(bottles.map((b) => b.name))];

From 8fb30a195771b7c7cef733a17a3eddcf4c9ae55d Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 Jan 2023 14:22:55 -0500
Subject: [PATCH 02/16] Initial website preloader

---
 src/layouts/partials/head.html      |  2 +
 src/layouts/partials/preloader.html | 61 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/layouts/partials/preloader.html

diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index c799a6e..be6bd0c 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -105,6 +105,8 @@
       }
     </script>
 
+    {{- partial "preloader.html" -}}
+
     {{- partial "auth-data-snippet.html" -}}
 
     {{- partial "toast.html" -}}
diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
new file mode 100644
index 0000000..7c80bcd
--- /dev/null
+++ b/src/layouts/partials/preloader.html
@@ -0,0 +1,61 @@
+<div class="preloader">
+  <div class="loading">
+    <p class="teal">Loading...</p>
+  </div>
+</div>
+
+<style>
+
+  .preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    z-index: 9999;
+  }
+
+  .loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 30px;
+    color: #333;
+  }
+
+  .loading:after {
+    content: "";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+</style>
+
+<script>
+
+  window.onload = function() {
+      var preloader = document.querySelector(".preloader");
+      preloader.style.opacity = "0";
+      setTimeout(function(){
+          preloader.style.display = "none";
+      }, 1000);
+  }
+
+</script>

From 33604fd14f1f9bdec928ca97136b3c493c552108 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 Jan 2023 17:09:04 -0500
Subject: [PATCH 03/16] loading screen styling

---
 src/layouts/partials/preloader.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
index 7c80bcd..767623f 100644
--- a/src/layouts/partials/preloader.html
+++ b/src/layouts/partials/preloader.html
@@ -25,15 +25,17 @@
     color: #333;
   }
 
-  .loading:after {
+  .loading:before {
     content: "";
     display: block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
+    width: 32px;
+    height: 32px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
     border-radius: 50%;
-    border: 6px solid #fff;
-    border-color: #fff transparent #fff transparent;
+    border: 2px solid #00ffd0;
+    border-color: #fff transparent #00ffd0 transparent;
     animation: lds-dual-ring 1.2s linear infinite;
   }
 

From 706e7e2d014fe0742c01f9ce58bd9fffbbb0d9ba Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 19 Jan 2023 17:20:04 -0500
Subject: [PATCH 04/16] steeping > loading

---
 src/layouts/partials/preloader.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
index 767623f..7047243 100644
--- a/src/layouts/partials/preloader.html
+++ b/src/layouts/partials/preloader.html
@@ -1,6 +1,6 @@
 <div class="preloader">
   <div class="loading">
-    <p class="teal">Loading...</p>
+    <p class="teal">steeping</p>
   </div>
 </div>
 

From 1871627b180d6a448235cf7663ff95d33d5d78cf Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 12:31:02 -0500
Subject: [PATCH 05/16] Changed loading screen animations and icon

---
 src/layouts/partials/preloader.html | 75 ++++++++++++-----------------
 1 file changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
index 7047243..e32e10a 100644
--- a/src/layouts/partials/preloader.html
+++ b/src/layouts/partials/preloader.html
@@ -1,63 +1,50 @@
-<div class="preloader">
-  <div class="loading">
-    <p class="teal">steeping</p>
+<div id="preloader">
+  <div id="status">
+    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead"></i>
+    <div id="loading-text"><p class="grid-gray">steeping...</p></div>
   </div>
 </div>
 
 <style>
-
-  .preloader {
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+  #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #1a1a1a;
+    background: #1a1a1a;
     z-index: 9999;
   }
-
-  .loading {
+  #status {
+    width: 200px;
+    height: 200px;
     position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 30px;
-    color: #333;
+    top: 50%;
+    background-position: center;
+    margin: -100px 0 0 -100px;
   }
-
-  .loading:before {
-    content: "";
-    display: block;
-    width: 32px;
-    height: 32px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 20px;
-    border-radius: 50%;
-    border: 2px solid #00ffd0;
-    border-color: #fff transparent #00ffd0 transparent;
-    animation: lds-dual-ring 1.2s linear infinite;
+  #loading-text {
+    font-size: 20px;
+    text-align: center;
+    margin-top: 10px;
+    animation: pulse 1s infinite;
   }
-
-  @keyframes lds-dual-ring {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
 </style>
 
 <script>
-
-  window.onload = function() {
-      var preloader = document.querySelector(".preloader");
-      preloader.style.opacity = "0";
-      setTimeout(function(){
-          preloader.style.display = "none";
-      }, 1000);
-  }
-
+  $(window).on('load', function() {
+    $('#status').fadeOut();
+    $('#preloader').delay(350).fadeOut('slow');
+  });
 </script>

From 2b4bd00c66ce4b04c3c510b1cfbba7f04394c1eb Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:22:18 -0500
Subject: [PATCH 06/16] Changed key-frames to opacity instead of scale

---
 src/layouts/partials/preloader.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/layouts/partials/preloader.html b/src/layouts/partials/preloader.html
index e32e10a..177ebb9 100644
--- a/src/layouts/partials/preloader.html
+++ b/src/layouts/partials/preloader.html
@@ -1,6 +1,6 @@
 <div id="preloader">
   <div id="status">
-    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead"></i>
+    <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>
@@ -12,9 +12,9 @@
     animation: pulse 1s infinite;
   }
   @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
   }
   #preloader {
     position: fixed;
@@ -37,7 +37,6 @@
   #loading-text {
     font-size: 20px;
     text-align: center;
-    margin-top: 10px;
     animation: pulse 1s infinite;
   }
 </style>

From 93bafae5105754e5d29455ddd1d627b354d5970e Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:10:39 -0500
Subject: [PATCH 07/16] Created partial for bottle-preloader

---
 src/layouts/index.html                     |  2 ++
 src/layouts/partials/bottle-preloader.html | 40 ++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/layouts/partials/bottle-preloader.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 9d53d58..73a024a 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+{{- partial "bottle-preloader.html" -}}
+
 <!-- Hero Section -->
 
 {{- partial "mobile-art-home" -}}
diff --git a/src/layouts/partials/bottle-preloader.html b/src/layouts/partials/bottle-preloader.html
new file mode 100644
index 0000000..9362b16
--- /dev/null
+++ b/src/layouts/partials/bottle-preloader.html
@@ -0,0 +1,40 @@
+<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;
+  }
+  #bottle-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>

From 830dece384f524f34aa17c515766b1ee7eafe6c8 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:29:28 -0500
Subject: [PATCH 08/16] Added preloader to bottles.jsx

---
 src/assets/scripts/bottles.jsx             | 9 ++++++++-
 src/layouts/page/bottles.html              | 1 -
 src/layouts/partials/bottle-preloader.html | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/assets/scripts/bottles.jsx b/src/assets/scripts/bottles.jsx
index 2350288..8773fbc 100644
--- a/src/assets/scripts/bottles.jsx
+++ b/src/assets/scripts/bottles.jsx
@@ -11,7 +11,14 @@ function Bottles() {
       });
   }, []);
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return (
+    <div id="bottle-preloader" className="flex">
+      <div id="bottle-status" className="justify-content-center 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...</p></div>
+      </div>
+    </div>
+  );
   if (!bottles) return null;
 
   const names = [...new Set(bottles.map((b) => b.name))];
diff --git a/src/layouts/page/bottles.html b/src/layouts/page/bottles.html
index c53b705..52f8e25 100644
--- a/src/layouts/page/bottles.html
+++ b/src/layouts/page/bottles.html
@@ -56,7 +56,6 @@
 
     .title-col{
       padding: 4vw !important;
-
     }
 
   }
diff --git a/src/layouts/partials/bottle-preloader.html b/src/layouts/partials/bottle-preloader.html
index 9362b16..c6136c9 100644
--- a/src/layouts/partials/bottle-preloader.html
+++ b/src/layouts/partials/bottle-preloader.html
@@ -28,7 +28,7 @@
   #bottle-loading-text {
     font-size: 20px;
     text-align: center;
-    animation: pulse 1s infinite;
+    animation: pulse 1s infinite !important;
   }
 </style>
 

From 6a29b43cdd8a312082236496d3d53364d40e3da4 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:33:22 -0500
Subject: [PATCH 09/16] Take partial away from index

---
 src/layouts/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 73a024a..9d53d58 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -1,7 +1,5 @@
 {{ define "main" }}
 
-{{- partial "bottle-preloader.html" -}}
-
 <!-- Hero Section -->
 
 {{- partial "mobile-art-home" -}}

From 4c096732e856c78ac718c16bdb58054a3a0fe490 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:55:51 -0500
Subject: [PATCH 10/16] Only show preloader on Index

---
 src/layouts/index.html         | 2 ++
 src/layouts/partials/head.html | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 9d53d58..a3c7a00 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+{{- partial "preloader.html" -}}
+
 <!-- Hero Section -->
 
 {{- partial "mobile-art-home" -}}
diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index be6bd0c..c799a6e 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -105,8 +105,6 @@
       }
     </script>
 
-    {{- partial "preloader.html" -}}
-
     {{- partial "auth-data-snippet.html" -}}
 
     {{- partial "toast.html" -}}

From ad4f39269a6357084ff412a0aa6dc6f9f0ddc33d Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:08:26 -0500
Subject: [PATCH 11/16] Styling for preloader on bottles page

---
 src/assets/scripts/bottles.jsx             |  2 +-
 src/layouts/page/bottles.html              | 30 ++++++++++++++++++++++
 src/layouts/partials/bottle-preloader.html |  5 ++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/assets/scripts/bottles.jsx b/src/assets/scripts/bottles.jsx
index 8773fbc..ef32d1a 100644
--- a/src/assets/scripts/bottles.jsx
+++ b/src/assets/scripts/bottles.jsx
@@ -13,7 +13,7 @@ function Bottles() {
 
   if (isLoading) return (
     <div id="bottle-preloader" className="flex">
-      <div id="bottle-status" className="justify-content-center mx-auto">
+      <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>
diff --git a/src/layouts/page/bottles.html b/src/layouts/page/bottles.html
index 52f8e25..3134503 100644
--- a/src/layouts/page/bottles.html
+++ b/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) {
 
diff --git a/src/layouts/partials/bottle-preloader.html b/src/layouts/partials/bottle-preloader.html
index c6136c9..b91afb5 100644
--- a/src/layouts/partials/bottle-preloader.html
+++ b/src/layouts/partials/bottle-preloader.html
@@ -24,6 +24,11 @@
   #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;

From 2d30db07bdbfa4533cb036e862a11ce2a4170aa0 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:23:46 -0500
Subject: [PATCH 12/16] Added loading as 'else' for stats

---
 src/layouts/partials/auth-data-snippet.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/partials/auth-data-snippet.html b/src/layouts/partials/auth-data-snippet.html
index 9b8e0ad..a62ad6e 100644
--- a/src/layouts/partials/auth-data-snippet.html
+++ b/src/layouts/partials/auth-data-snippet.html
@@ -14,9 +14,9 @@
         $('#count5').html(signups)
         $('#count6').html(signups)
         $('#count7').html(signups)
-        $('#stat-one').html(res.repos ? res.repos.toLocaleString() : "")
-        $('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "")
-        $('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "")
+        $('#stat-one').html(res.repos ? res.repos.toLocaleString() : "loading...")
+        $('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "loading...")
+        $('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "loading...")
       })
   } catch (e) {
     console.error(e)

From 2be6f658172b90b8102d3b7344b100d169468ba0 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:48:22 -0500
Subject: [PATCH 13/16] Revert "Added loading as 'else' for stats"

This reverts commit 2d30db07bdbfa4533cb036e862a11ce2a4170aa0.
---
 src/layouts/partials/auth-data-snippet.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/partials/auth-data-snippet.html b/src/layouts/partials/auth-data-snippet.html
index a62ad6e..9b8e0ad 100644
--- a/src/layouts/partials/auth-data-snippet.html
+++ b/src/layouts/partials/auth-data-snippet.html
@@ -14,9 +14,9 @@
         $('#count5').html(signups)
         $('#count6').html(signups)
         $('#count7').html(signups)
-        $('#stat-one').html(res.repos ? res.repos.toLocaleString() : "loading...")
-        $('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "loading...")
-        $('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "loading...")
+        $('#stat-one').html(res.repos ? res.repos.toLocaleString() : "")
+        $('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "")
+        $('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "")
       })
   } catch (e) {
     console.error(e)

From 5de6a86c1686513880ed9aba094ad490e09c24cd Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:25:24 -0500
Subject: [PATCH 14/16] package-bottle.jsx edit to inlude loading

---
 src/assets/scripts/package-bottles.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/assets/scripts/package-bottles.jsx b/src/assets/scripts/package-bottles.jsx
index 8e10065..79b1061 100644
--- a/src/assets/scripts/package-bottles.jsx
+++ b/src/assets/scripts/package-bottles.jsx
@@ -1,13 +1,19 @@
 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>Loading...</div>;
+
   if (!bottles) return null;
 
   const names = [...new Set(bottles.map((b) => b.name))];

From 609e527c9a76d1fbdb74b1a44813cd4b21f84e98 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:31:58 -0500
Subject: [PATCH 15/16] Added styling to package-details page

---
 src/assets/scripts/package-bottles.jsx |  9 ++++++++-
 src/layouts/page/package-detail.html   | 27 ++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/assets/scripts/package-bottles.jsx b/src/assets/scripts/package-bottles.jsx
index 79b1061..6d4f6f9 100644
--- a/src/assets/scripts/package-bottles.jsx
+++ b/src/assets/scripts/package-bottles.jsx
@@ -12,7 +12,14 @@ function PackageBottles() {
       });
   }, []);
 
-  if (isLoading) return <div>Loading...</div>;
+  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 available versions...</p></div>
+      </div>
+    </div>
+  );
 
   if (!bottles) return null;
 
diff --git a/src/layouts/page/package-detail.html b/src/layouts/page/package-detail.html
index a72ca06..1eba1a1 100644
--- a/src/layouts/page/package-detail.html
+++ b/src/layouts/page/package-detail.html
@@ -94,6 +94,33 @@
     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: 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{

From 8ae27c261ae1a2b9eb7e496c1e86a294851035d9 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:45:43 -0500
Subject: [PATCH 16/16] Styuling for bottle placeholder on bottle-details page

---
 src/assets/scripts/package-bottles.jsx | 10 ++++++----
 src/layouts/page/package-detail.html   |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/assets/scripts/package-bottles.jsx b/src/assets/scripts/package-bottles.jsx
index 6d4f6f9..b3a36e7 100644
--- a/src/assets/scripts/package-bottles.jsx
+++ b/src/assets/scripts/package-bottles.jsx
@@ -13,10 +13,12 @@ function PackageBottles() {
   }, []);
 
   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 available versions...</p></div>
+    <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>
   );
diff --git a/src/layouts/page/package-detail.html b/src/layouts/page/package-detail.html
index 1eba1a1..ee95d6b 100644
--- a/src/layouts/page/package-detail.html
+++ b/src/layouts/page/package-detail.html
@@ -108,6 +108,7 @@
     width: 100%;
     height: 200px;
     background: #1a1a1a;
+    border: 1px solid #949494;;
   }
   #bottle-status {
     width: 100%;