From 380564f8c930e3f6d008afe3d2d583ae427c56b2 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 5 Jun 2024 01:14:41 +0300
Subject: [PATCH] chore(refresher): update times

---
 app/static/css/refresher.css | 13 +++++--------
 app/static/js/refresher.js   |  8 ++++----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/static/css/refresher.css b/app/static/css/refresher.css
index 6a8ccc4..57a5fce 100644
--- a/app/static/css/refresher.css
+++ b/app/static/css/refresher.css
@@ -8,7 +8,7 @@ body.refreshing header {
 
 body.refreshing .refresher {
   transform: translate3d(0, 150%, 0) scale(1);
-  z-index: 1;
+  z-index: 50;
   visibility: visible;
 }
 
@@ -26,8 +26,8 @@ body.refreshing .refresher {
     0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12),
     0 3px 1px -2px rgba(0, 0, 0, 0.2);
-  transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
-  will-change: transform, opacity;
+  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform;
   display: inline-flex;
   justify-content: space-evenly;
   align-items: center;
@@ -44,26 +44,23 @@ body.refreshing .refresher.shrink {
 }
 
 .loading-bar {
+  background-color: var(--primary-color);
   width: 4px;
   height: 18px;
   border-radius: 4px;
-  animation: loading 1s ease-in-out infinite;
+  animation: loading 0.81s ease-in-out infinite;
 }
 
 .loading-bar:nth-child(1) {
-  background-color: var(--primary-color);
   animation-delay: 0;
 }
 .loading-bar:nth-child(2) {
-  background-color: var(--primary-color);
   animation-delay: 0.09s;
 }
 .loading-bar:nth-child(3) {
-  background-color: var(--primary-color);
   animation-delay: 0.18s;
 }
 .loading-bar:nth-child(4) {
-  background-color: var(--primary-color);
   animation-delay: 0.27s;
 }
 
diff --git a/app/static/js/refresher.js b/app/static/js/refresher.js
index 7db4c85..9e03bd5 100644
--- a/app/static/js/refresher.js
+++ b/app/static/js/refresher.js
@@ -25,7 +25,7 @@ async function simulateRefreshAction() {
   const refresher = document.querySelector(".refresher");
 
   document.body.classList.add("refreshing");
-  await sleep(700);
+  await sleep(500);
 
   refresher.classList.add("shrink");
   await transitionEnd("transform", refresher);
@@ -37,7 +37,7 @@ async function simulateRefreshAction() {
   refresher.classList.remove("done");
 }
 
-mainContentsEl.addEventListener(
+document.body.addEventListener(
   "touchstart",
   (e) => {
     _startY = e.touches[0].pageY;
@@ -45,13 +45,13 @@ mainContentsEl.addEventListener(
   { passive: true },
 );
 
-mainContentsEl.addEventListener(
+document.body.addEventListener(
   "touchmove",
   async (e) => {
     const y = e.touches[0].pageY;
     if (
       document.scrollingElement.scrollTop === 0 &&
-      y > _startY &&
+      y > _startY + 150 &&
       !document.body.classList.contains("refreshing")
     ) {
       await simulateRefreshAction();