add touch effect

packages/app/src/components/Music/Track/index.jsx

@@ -25,6 +25,7 @@ const handlers = {
 
 const Track = (props) => {
     const {
+        loading,
         track_manifest,
         playback_status,
     } = React.useContext(PlayerContext)
@@ -139,6 +140,7 @@ const Track = (props) => {
             {
                 ["current"]: isCurrent,
                 ["playing"]: isPlaying,
+                ["loading"]: isCurrent && loading
             }
         )}
         style={{

packages/app/src/components/Music/Track/index.less

@@ -1,3 +1,27 @@
+html {
+    &.mobile {
+        .music-track {
+            &:active {
+                animation: press 150ms ease-in-out;
+            }
+
+            &.loading {
+                // TODO: create a bottom line svg to animate stroke width
+            }
+        }
+    }
+}
+
+@keyframes press {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
 .music-track {
     position: relative;
 
@@ -9,6 +33,8 @@
 
     isolation: isolate;
 
+    transition: all 150ms ease-in-out;
+
     &:hover {
         .music-track_actions {
             &.withOrder {
@@ -45,7 +71,6 @@
                 linear-gradient(to right, rgba(var(--cover_average-color)), transparent),
                 url(https://grainy-gradients.vercel.app/noise.svg);
         }
-
     }
 
     .music-track_background {