From 28c3b9b5fef639ec7c88d82cf3f033c4bf7d75d1 Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Fri, 24 Jun 2022 13:02:33 -0400
Subject: [PATCH] Agh demo-page-loadings may have to be CSS-driven

---
 .../components/home-demo-page/index.marko     | 119 +++++++++++-------
 1 file changed, 74 insertions(+), 45 deletions(-)

diff --git a/src/pages/index/components/home-demo-page/index.marko b/src/pages/index/components/home-demo-page/index.marko
index 6b6bcea2..a7cb2740 100644
--- a/src/pages/index/components/home-demo-page/index.marko
+++ b/src/pages/index/components/home-demo-page/index.marko
@@ -25,9 +25,11 @@ style {
     position:absolute;
     top:0;
     left:0;
+    right:0;
     height:0.5em;
     background: linear-gradient(90deg, #25dbd2, #33d5f4, #039fea);
     transform-origin: 0 0;
+    will-change: transform;
   }
   .demo-page-header {
     display: flex;
@@ -38,6 +40,7 @@ style {
   .demo-page-logo {
     font-size:2em;
     font-weight: 800;
+    background: #fff;
   }
   .demo-page-cart {
     background: #1d1924;
@@ -52,8 +55,22 @@ style {
   .demo-page-image {
     flex: 1;
   }
+  .demo-page-image-lowres {
+    background:
+      radial-gradient(closest-side circle at 35% 40%, rgba(0,0,0,0.3), rgba(0,0,0,0.15) 5%, rgba(0,0,0,0) 50%),
+      radial-gradient(50% 25% ellipse at 45% 45%, rgba(0,0,0,0.21), rgba(0,0,0,0) 70%);
+    /* opacity: 0.3; */
+    position: absolute;
+    width: 50%;
+  }
+  .demo-page-image-lowres::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
   .demo-page-description {
     flex: 1;
+    background: #fff;
   }
   .demo-page-description-title {
     font-size: 1.2em;
@@ -71,6 +88,7 @@ style {
     padding:0.5em 1em;
     display: inline-block;
     margin:0.25em 0;
+    z-index: 1;
   }
   .demo-page-description-text {
     font-size: 0.8em;
@@ -89,21 +107,44 @@ style {
     padding:1em;
     background:#f4f2f4;
   }
-  .demo-page-footer > div {
+  .demo-page-footlink {
     font-size: 0.8em;
+    z-index: 1;
   }
   .demo-page-loading {
     opacity: 0;
   }
-  .demo-page-lowres {
-    filter: blur(1em) grayscale(0.6);
-    opacity: 0.3;
-  }
   .demo-page-hydrate-partial .demo-page-hydrated,
-  .demo-page-hydrate-all div {
-    animation-name: pulse-red;
-    animation-iteration-count: infinite;
-    animation-duration: 2s;
+  .demo-page-hydrate-all .demo-page-delay {
+    position: relative;
+  }
+  .demo-page-hydrate-partial .demo-page-hydrated::before,
+  .demo-page-hydrate-all .demo-page-delay::before {
+    content: "";
+    position: absolute;
+    top: -15px; right: -15px; bottom: -15px; left: -15px;
+    border: 15px solid rgba(255, 50, 82, 0.7);
+    z-index: -1;
+    will-change: transform;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .demo-page-hydrate-partial .demo-page-hydrated::before,
+    .demo-page-hydrate-all .demo-page-delay::before {
+      animation: pulse 2s infinite;
+      animation-delay: inherit;
+      border-width: 52px;
+      top: -30px; right: -30px; bottom: -30px; left: -30px;
+      opacity: 0;
+    }
+  }
+  @keyframes pulse {
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.1);
+    }
   }
   .demo-page-delay-1 {
     animation-delay: 100ms;
@@ -157,24 +198,6 @@ style {
     animation-delay: 1700ms;
   }
 
-  @media (prefers-reduced-motion) {
-    .demo-page-hydrate-partial .demo-page-hydrated,
-    .demo-page-hydrate-all div {
-      animation: none;
-      box-shadow: 0 0 0 15px rgba(255, 50, 82, 0.7);
-    }
-  }
-
-  @keyframes pulse-red {
-    0% {
-      box-shadow: 0 0 0 0 rgba(255, 50, 82, 0.9);
-    }
-
-    100% {
-      box-shadow: 0 0 0px 90px rgba(255, 50, 82, 0);
-    }
-  }
-
   .demo-page-marko,
   .demo-page-other {
     position: absolute;
@@ -214,6 +237,10 @@ style {
   }
 }
 
+$ function delay (n) {
+  return `demo-page-delay demo-page-delay-${n}`;
+}
+
 $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.progress / 0.9;
 
 <div.demo-page-wrapper class=input.class role="img" aria-label=input.label> 
@@ -221,21 +248,23 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
     <if(input.progress >= 0)>
       <div.demo-page-progress style={ transform: `scaleX(${Math.min(1, input.progress * (input.buffered ? 1 : 1/0.9))})` }/>
     </if>
-    <div.demo-page-header.demo-page-delay-1 class={ "demo-page-loading": progress < 0.1 }>
-      <div.demo-page-link.demo-page-delay-2>All Products</div>
-      <div.demo-page-logo.demo-page-delay-3>BuyItNow</div>
-      <div.demo-page-cart.demo-page-delay-4.demo-page-hydrated>Cart (0)</div>
+    <div.demo-page-header.${delay(1)} class={ "demo-page-loading": progress < 0.1 }>
+      <div.demo-page-link.${delay(2)}>All Products</div>
+      <div.demo-page-logo.${delay(3)}>BuyItNow</div>
+      <div.demo-page-cart.${delay(4)}.demo-page-hydrated>Cart (0)</div>
     </div>
-    <div.demo-page-product.demo-page-delay-5 class={ "demo-page-loading": progress < 0.4 }>
-      <img.demo-page-image class={ "demo-page-lowres": progress < 0.6 || (input.buffered && input.progress < 1) } src="./product.png"/>
-      <div.demo-page-description.demo-page-delay-6>
+    <div.demo-page-product.${delay(5)} class={ "demo-page-loading": progress < 0.4 }>
+      $ const hideLowRes =  progress < 0.6 || (input.buffered && input.progress < 1);
+      <div.demo-page-image.demo-page-image-lowres class={ "demo-page-loading": !hideLowRes }/>
+      <img.demo-page-image class={ "demo-page-loading": hideLowRes } src="./product.png"/>
+      <div.demo-page-description.${delay(6)}>
         <span.demo-page-description-title>Google Home - $79</span>
-        <div.demo-page-description-button.demo-page-delay-7.demo-page-hydrated>Add to Cart</div>
+        <div.demo-page-description-button.${delay(7)}.demo-page-hydrated>Add to Cart</div>
         <span.demo-page-description-text>Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side</span>
       </div>
     </div>
-    <div.demo-page-review.demo-page-delay-8 class={ "demo-page-loading": progress < 0.8 }>
-      <div.demo-page-rating.demo-page-delay-9>
+    <div.demo-page-review.${delay(8)} class={ "demo-page-loading": progress < 0.8 }>
+      <div.demo-page-rating.${delay(9)}>
         ★★★★☆
       </div>
       <span.demo-page-description-text>
@@ -243,8 +272,8 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
         Google has created a nice device that provides music and information by voice control. The microphone is very good and will usually pick up commands from across the room. The speakers sound surprisingly good for such a small device. I wish it had tone control though.
       </span>
     </div>
-    <div.demo-page-review.demo-page-delay-10 class={ "demo-page-loading": progress < 1 }>
-      <div.demo-page-rating.demo-page-delay-11>
+    <div.demo-page-review.${delay(10)} class={ "demo-page-loading": progress < 1 }>
+      <div.demo-page-rating.${delay(11)}>
         ★★★★★
       </div>
       <span.demo-page-description-text>
@@ -252,12 +281,12 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
         Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. 
       </span>
     </div>
-    <div.demo-page-footer.demo-page-delay-12 class={ "demo-page-loading": progress < 0.1 }>
-      <div.demo-page-delay-13>About</div>
-      <div.demo-page-delay-14>Security</div>
-      <div.demo-page-delay-15>Policies</div>
-      <div.demo-page-delay-16>Help</div>
-      <div.demo-page-delay-17>Sitemap</div>
+    <div.demo-page-footer.${delay(12)} class={ "demo-page-loading": progress < 0.1 }>
+      <div.demo-page-footlink.${delay(13)}>About</div>
+      <div.demo-page-footlink.${delay(14)}>Security</div>
+      <div.demo-page-footlink.${delay(15)}>Policies</div>
+      <div.demo-page-footlink.${delay(16)}>Help</div>
+      <div.demo-page-footlink.${delay(17)}>Sitemap</div>
     </div>
   </div>
   <if(input.buffered || input.hydrateAll)>