feat: add loading placeholder

inovex · Jun 24, 2024 · fc9e1a5 · fc9e1a5
1 parent c23e305
commit fc9e1a5
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 9 deletions.
diff --git a/condensing/index.html b/condensing/index.html
@@ -30,9 +30,15 @@ <h1>Order History</h1>
       <li class="list-header">
         <div></div>
         <div class="name">Name</div>
-        <div class="info">Order n° </div>
+        <div class="info">Order n°</div>
         <div class="quantity">Quantity</div>
       </li>
+      <li class="placeholder">
+        <div></div>
+        <div class="name">Loading...</div>
+        <div class="info"></div>
+        <div class="quantity"></div>
+      </li>
     </ul>
     <aside>
       <p>Please select an item.</p>

diff --git a/condensing/index.js b/condensing/index.js
@@ -12,6 +12,8 @@ class CondensingSidebar {
       item.addEventListener('click', highlightItemAndOpenSidebar);
       item.addEventListener('keypress', highlightItemAndOpenSidebar);
     });
+    const loadingPlaceholder = document.querySelector('li.placeholder');
+    loadingPlaceholder.remove();
   }
 
   highlightActiveListItem(event) {
@@ -88,7 +90,6 @@ function safeStartViewTransition(updateDom) {
 
 async function init() {
   new CondensingSidebar(coffeeList);
-  // TODO, add other demos here
 }
 
 init();
diff --git a/condensing/style.css b/condensing/style.css
@@ -31,21 +31,21 @@ a {
 
 /* element swap */
 ::view-transition-old(details) {
-  animation: slide-down 0.2s both ease-in-out;
+  animation: slide-start 0.24s both ease-in-out;
 }
 
 ::view-transition-new(details) {
-  animation: slide-up 0.2s both ease-in-out;
+  animation: slide-end 0.24s both ease-in-out;
 }
 
 /* element leave */
 ::view-transition-old(details):only-child {
-  animation: slide-in 0.2s both ease-in reverse;
+  animation: slide-in 0.24s both ease-in reverse;
 }
 
 /* element enter */
 ::view-transition-new(details):only-child {
-  animation: slide-in 0.2s both ease-out;
+  animation: slide-in 0.24s both ease-out;
 }
 
 @container list (max-width: 400px) {
@@ -362,7 +362,7 @@ a {
   }
 }
 
-@keyframes slide-up {
+@keyframes slide-end {
   from {
     transform: translateX(100%);
     opacity: 0;
@@ -374,7 +374,7 @@ a {
   }
 }
 
-@keyframes slide-down {
+@keyframes slide-start {
   from {
     transform: translateX(0);
     opacity: 1;

diff --git a/overlapping/index.html b/overlapping/index.html
@@ -33,6 +33,12 @@ <h1>Order History</h1>
         <div class="info">Order n° </div>
         <div class="quantity">Quantity</div>
       </li>
+      <li class="placeholder">
+        <div></div>
+        <div class="name">Loading...</div>
+        <div class="info"></div>
+        <div class="quantity"></div>
+      </li>
     </ul>
     <dialog></dialog>
   </main>

diff --git a/overlapping/index.js b/overlapping/index.js
@@ -12,6 +12,8 @@ class OverlappingSidebar {
       item.addEventListener('click', highlightItemAndOpenSidebar);
       item.addEventListener('keypress', highlightItemAndOpenSidebar);
     });
+    const loadingPlaceholder = document.querySelector('li.placeholder');
+    loadingPlaceholder.remove();
   }
 
   highlightActiveListItem(event) {

diff --git a/reserved/index.html b/reserved/index.html
@@ -33,6 +33,12 @@ <h1>Order History</h1>
         <div class="info">Order n° </div>
         <div class="quantity">Quantity</div>
       </li>
+      <li class="placeholder">
+        <div></div>
+        <div class="name">Loading...</div>
+        <div class="info"></div>
+        <div class="quantity"></div>
+      </li>
     </ul>
     <aside>
       <p class="placeholder">Please select an item.</p>

diff --git a/reserved/index.js b/reserved/index.js
@@ -12,6 +12,8 @@ class ReservedSidebar {
       item.addEventListener('click', highlightItemAndReplaceSidebarContent);
       item.addEventListener('keypress', highlightItemAndReplaceSidebarContent);
     });
+    const loadingPlaceholder = document.querySelector('li.placeholder');
+    loadingPlaceholder.remove();
   }
 
   highlightActiveListItem(event) {
@@ -42,7 +44,7 @@ class ReservedSidebar {
     detailsTempCloneDesc.textContent = description;
     detailsTempClonePaymentBadge.textContent = paymentType;
     detailsEl.replaceChildren(detailsTempClone);
-    animateBorderOnImgLoad(detailsTempCloneImg);
+    this.animateBorderOnImgLoad(detailsTempCloneImg);
   }
 
   addItemToList({ name, quantity, info, imgSrc }) {