Fixed: Movie posters flickering when width changes repeatedly

(cherry picked from commit 53cf5308931069638c23925596a3fd8aaccc5d98)

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

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;
   history: HistoryAppState;

frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx

@@ -256,13 +256,18 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
     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;

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;
     }