From 9aae065c5d221f39b72af82a680b28ceb574cbab 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: Artists posters flickering when width changes
 repeatedly

(cherry picked from commit 53cf5308931069638c23925596a3fd8aaccc5d98)

Closes #64448
---
 frontend/src/App/State/AppState.ts                       | 9 +++++++++
 frontend/src/Artist/Index/Posters/ArtistIndexPosters.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 5add86a4e..04f7a609f 100644
--- a/frontend/src/App/State/AppState.ts
+++ b/frontend/src/App/State/AppState.ts
@@ -39,8 +39,17 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
   albums: AlbumAppState;
+  app: AppSectionState;
   artist: ArtistAppState;
   artistIndex: ArtistIndexAppState;
   history: HistoryAppState;
diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx
index 8c27d363d..cd067053d 100644
--- a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx
+++ b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx
@@ -213,13 +213,18 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) {
     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 currentScrollListener = isSmallScreen ? window : scrollerRef.current;
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;
     }