Sluggish page response and loading with CSS animations on iOS

[desertwitch]

First of all thanks for the amazing project, I've been looking for something like this for ages. Unfortunately when opening the installation on iOS, I'm running into sluggish page response due to the running of the poster image animations (blurring and fading in after loading the poster image). I'm guessing this is due to limited CPU power on mobile devices and multiple CSS animations running at the same time.

The page responds well when all the animations have completed, but before that the page is sluggish and does not respond well to user input overall. This is especially bothersome if I just want to quickly navigate to another page via the menu, but the menu won't open or some input is not registered at all because CSS animations are still running.

Would there be a possibility to consider removing the eye-candy CSS animations for the poster images on mobile devices, in order to have better loading and page response times on low-CPU devices? Alternatively, implement a setting to enable/disable CSS animations for poster images altogether? Thanks in advance!

[Findus23]

While the animations don't cause performance issues on my PC I feel like they make the website look a lot slower than it actually is. The images load extremely quickly for me, so the animation takes much longer afterwards and repeat on every subpage. So I made a very quick patch to remove them:

diff --git a/client/src/components/Poster.tsx b/client/src/components/Poster.tsx
index 2326738..d7aa4f9 100644
--- a/client/src/components/Poster.tsx
+++ b/client/src/components/Poster.tsx
@@ -155,8 +155,9 @@ const PosterSpring: FunctionComponent<{
   const content = (
     <>
       {src && (
-        <animated.div style={imageStyles} className="w-full h-full">
+        // <animated.div style={imageStyles} className="w-full h-full">
           <img
+           style={{zIndex: 100, position: "relative"}}
             ref={imgRef}
             src={src}
             draggable="false"
@@ -164,14 +165,14 @@ const PosterSpring: FunctionComponent<{
             onError={() => setImageLoaded(false)}
             className="w-full h-full rounded"
           />
-        </animated.div>
+        // </animated.div>
       )}
-      <animated.div
-        style={placeholderStyles}
+      <div
+        // style={placeholderStyles}
         className="absolute top-0 left-0 flex items-center w-full h-full text-gray-900 rounded overflow-clip text-9xl bg-amber-800"
       >
         <div className="w-full text-center select-none">?</div>
-      </animated.div>
+      </div>
     </>
   );

Of course this is not done in any proper way, but just as a quick test. But with it now switching between the movies and tv tab feels nearly instantaneous.