From ee67013b3da6fb618c7cd61454790fd4077d2c94 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 24 Aug 2023 22:21:17 +0200
Subject: [PATCH] fix: greatly improve UI performance

---
 package.json                                        |  2 +-
 src/renderer/Router.svelte                          |  4 ++--
 .../components/cards/EpisodeSkeletonCard.svelte     | 12 ++++++------
 .../components/cards/FullSkeletonCard.svelte        |  8 ++++----
 src/renderer/components/cards/SkeletonCard.svelte   |  6 +++---
 src/renderer/css.css                                | 13 ++++++-------
 src/renderer/views/Settings.svelte                  |  2 +-
 7 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 1a5e4d2..bbebb62 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "4.3.11",
+  "version": "4.3.12",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",
   "main": "build/main.js",
diff --git a/src/renderer/Router.svelte b/src/renderer/Router.svelte
index 44b964f..db025bf 100644
--- a/src/renderer/Router.svelte
+++ b/src/renderer/Router.svelte
@@ -10,8 +10,8 @@
   export let page = 'home'
 </script>
 
-<div class='wrapper h-full position-absolute overflow-hidden pointer-events-none'>
-  <Miniplayer active={page !== 'player'} class='bg-dark-light z-10 pointer-events-auto {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='60rem' width='300px' padding='2rem'>
+<div class='wrapper h-full position-absolute overflow-hidden'>
+  <Miniplayer active={page !== 'player'} class='bg-dark-light z-10 {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='60rem' width='300px' padding='2rem'>
     <MediaHandler miniplayer={page !== 'player'} bind:page />
   </Miniplayer>
 </div>
diff --git a/src/renderer/components/cards/EpisodeSkeletonCard.svelte b/src/renderer/components/cards/EpisodeSkeletonCard.svelte
index bfd99dd..3716f6d 100644
--- a/src/renderer/components/cards/EpisodeSkeletonCard.svelte
+++ b/src/renderer/components/cards/EpisodeSkeletonCard.svelte
@@ -1,13 +1,13 @@
 <div class='d-flex p-20 pb-10 position-relative wrapper content-visibility-auto'>
   <div class='item d-flex flex-column h-full'>
-    <div class='image h-200 w-full rounded skeloader bg-dark-light' />
+    <div class='image h-200 w-full rounded skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
     <div class='row pt-15'>
       <div class='col-7'>
-        <div class='h-10 skeloader w-150 bg-dark-light rounded ' />
+        <div class='h-10 skeloader w-150 bg-dark-light rounded '><div class='skeleloader-swipe' /></div>
       </div>
       <div class='col-5 d-flex flex-column align-items-end'>
-        <div class='h-10 skeloader w-100 bg-dark-light mb-5 rounded ' />
-        <div class='h-10 skeloader w-50 bg-dark-light rounded ' />
+        <div class='h-10 skeloader w-100 bg-dark-light mb-5 rounded'><div class='skeleloader-swipe' /></div>
+        <div class='h-10 skeloader w-50 bg-dark-light rounded'><div class='skeleloader-swipe' /></div>
       </div>
     </div>
   </div>
@@ -19,7 +19,7 @@
     width: 36rem
   }
   .wrapper {
-    height: 27.7rem;
-    contain-intrinsic-height: 27.7rem;
+    height: 28.7rem;
+    contain-intrinsic-height: 28.7rem;
   }
 </style>
diff --git a/src/renderer/components/cards/FullSkeletonCard.svelte b/src/renderer/components/cards/FullSkeletonCard.svelte
index ebe5a9c..946c489 100644
--- a/src/renderer/components/cards/FullSkeletonCard.svelte
+++ b/src/renderer/components/cards/FullSkeletonCard.svelte
@@ -1,11 +1,11 @@
 <div class='d-flex px-20 py-10 position-relative content-visibility-auto'>
   <div class='card m-0 p-0 overflow-hidden'>
     <div class='row h-full'>
-      <div class='col-4 skeloader bg-dark-light' />
+      <div class='col-4 skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
       <div class='col-8 bg-very-dark px-15 py-10'>
-        <p class='skeloader bg-dark-light w-300 h-25 rounded bg-dark' />
-        <p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' />
-        <p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' />
+        <div class='skeloader bg-dark-light w-300 h-25 rounded bg-dark'><div class='skeleloader-swipe' /></div>
+        <div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></div>
+        <div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></div>
       </div>
     </div>
   </div>
diff --git a/src/renderer/components/cards/SkeletonCard.svelte b/src/renderer/components/cards/SkeletonCard.svelte
index a27b183..2d8c293 100644
--- a/src/renderer/components/cards/SkeletonCard.svelte
+++ b/src/renderer/components/cards/SkeletonCard.svelte
@@ -1,8 +1,8 @@
 <div class='d-flex p-20 wrapper content-visibility-auto'>
   <div class='item d-flex flex-column h-full'>
-    <div class='img w-full rounded skeloader bg-dark-light' />
-    <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15' />
-    <div class='skeloader rounded bg-dark-light h-10 w-100 mt-15' />
+    <div class='img w-full rounded skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
+    <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15'><div class='skeleloader-swipe' /></div>
+    <div class='skeloader rounded bg-dark-light h-10 w-100 mt-15'><div class='skeleloader-swipe' /></div>
   </div>
 </div>
 
diff --git a/src/renderer/css.css b/src/renderer/css.css
index d509d71..c12807f 100644
--- a/src/renderer/css.css
+++ b/src/renderer/css.css
@@ -145,11 +145,11 @@ img[src=''], img[src=' '] {
 
 @keyframes load {
   from {
-    left: -15rem;
+    background-position-x: 200%;
   }
 
   to {
-    left: 100%;
+    background-position-x: -100%;
   }
 }
 @keyframes load-in {
@@ -169,13 +169,12 @@ img[src=''], img[src=' '] {
   overflow: hidden;
 }
 
-.skeloader::before {
-  will-change: left;
-  content: '';
-  position: absolute;
+.skeloader .skeleloader-swipe {
   height: 100%;
-  width: 15rem;
+  width: 100%;
   background: linear-gradient(to right, transparent 0%, #17191c 50%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size: 200% 100%;
   animation: load 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
 }
 
diff --git a/src/renderer/views/Settings.svelte b/src/renderer/views/Settings.svelte
index cd85da7..b6e7376 100644
--- a/src/renderer/views/Settings.svelte
+++ b/src/renderer/views/Settings.svelte
@@ -181,7 +181,7 @@
 
 <Tabs>
   <div class='d-flex w-full h-full'>
-    <div class='d-flex flex-column h-full w-300 bg-dark'>
+    <div class='d-flex flex-column h-full w-300 bg-dark position-relative'>
       <div class='px-20 py-15 font-size-20 font-weight-semi-bold border-bottom root'>Settings</div>
       {#each Object.values(groups) as group}
         <TabLabel>