From 53cf5308931069638c23925596a3fd8aaccc5d98 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 12 Jan 2024 23:17:29 -0800
Subject: [PATCH] Fixed: Series posters flickering when width changes
 repeatedly

Closes #6311
---
 frontend/src/App/State/AppState.ts                       | 9 +++++++++
 frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx | 9 +++++++--
 ...DimensionsSelector.js => createDimensionsSelector.ts} | 3 ++-
 3 files changed, 18 insertions(+), 3 deletions(-)
 rename frontend/src/Store/Selectors/{createDimensionsSelector.js => createDimensionsSelector.ts} (69%)

diff --git a/frontend/src/App/State/AppState.ts b/frontend/src/App/State/AppState.ts
index fcf1833ee..72aa0d7f0 100644
--- a/frontend/src/App/State/AppState.ts
+++ b/frontend/src/App/State/AppState.ts
@@ -44,7 +44,16 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
+  app: AppSectionState;
   calendar: CalendarAppState;
   commands: CommandAppState;
   episodeFiles: EpisodeFilesAppState;
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
index 622445999..48e9674c0 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
@@ -202,13 +202,18 @@ export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
     if (current) {
       const width = current.clientWidth;
       const padding = bodyPadding - 5;
+      const finalWidth = width - padding * 2;
+
+      if (Math.abs(size.width - finalWidth) < 20 || size.width === finalWidth) {
+        return;
+      }
 
       setSize({
-        width: width - padding * 2,
+        width: finalWidth,
         height: window.innerHeight,
       });
     }
-  }, [isSmallScreen, scrollerRef, bounds]);
+  }, [isSmallScreen, size, scrollerRef, bounds]);
 
   useEffect(() => {
     const currentScrollerRef = scrollerRef.current as HTMLElement;
diff --git a/frontend/src/Store/Selectors/createDimensionsSelector.js b/frontend/src/Store/Selectors/createDimensionsSelector.ts
similarity index 69%
rename from frontend/src/Store/Selectors/createDimensionsSelector.js
rename to frontend/src/Store/Selectors/createDimensionsSelector.ts
index ce26b2e2c..b9602cb02 100644
--- a/frontend/src/Store/Selectors/createDimensionsSelector.js
+++ b/frontend/src/Store/Selectors/createDimensionsSelector.ts
@@ -1,8 +1,9 @@
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 
 function createDimensionsSelector() {
   return createSelector(
-    (state) => state.app.dimensions,
+    (state: AppState) => state.app.dimensions,
     (dimensions) => {
       return dimensions;
     }