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{