From 6226930bd9283b9a9e25bb5246d3ce90f37e8fce Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 25 Dec 2023 14:08:49 +0100
Subject: [PATCH] Memoize ShlinkWebComponentContainer to fix flickering charts
 on re-renders

---
 src/common/ShlinkWebComponentContainer.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/common/ShlinkWebComponentContainer.tsx b/src/common/ShlinkWebComponentContainer.tsx
index 91e9a428..ee4051fe 100644
--- a/src/common/ShlinkWebComponentContainer.tsx
+++ b/src/common/ShlinkWebComponentContainer.tsx
@@ -1,5 +1,6 @@
 import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
+import { memo } from 'react';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -22,7 +23,11 @@ type ShlinkWebComponentContainerDeps = {
 const ShlinkWebComponentContainer: FCWithDeps<
 ShlinkWebComponentContainerProps,
 ShlinkWebComponentContainerDeps
-> = withSelectedServer(({ selectedServer, settings }) => {
+// FIXME Using `memo` here to solve a flickering effect in charts.
+//       memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
+//       extra rendering there.
+//       This should be revisited at some point.
+> = withSelectedServer(memo(({ selectedServer, settings }) => {
   const {
     buildShlinkApiClient,
     TagColorsStorage: tagColorsStorage,
@@ -47,7 +52,7 @@ ShlinkWebComponentContainerDeps
       )}
     />
   );
-});
+}));
 
 export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
   'buildShlinkApiClient',