From 8cc5f63ecd5902cc4a56bb2f5f0a40e4255521db Mon Sep 17 00:00:00 2001
From: chimpdev <skyhancloud@gmail.com>
Date: Tue, 17 Dec 2024 04:55:06 +0300
Subject: [PATCH] fix(templates-previews): use useMemo for performance
 optimization Members component

---
 .../[id]/preview/components/Members/index.jsx        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/app/(templates)/templates/[id]/preview/components/Members/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Members/index.jsx
index 93ceee80..eacbf4bc 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Members/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Members/index.jsx
@@ -5,13 +5,15 @@ import { toast } from 'sonner';
 import { FaDiscord } from 'react-icons/fa';
 import cn from '@/lib/cn';
 import { t } from '@/stores/language';
+import { useMemo } from 'react';
 
 export default function Members({ template, isMobile, currentlyOpenedSection }) {
-  function getRandomBrandColor() {
-    const colors = ['#5865F2', '#757e8a', '#3ba55c', '#faa61a', '#ed4245', '#eb459f'];
+  const colors = ['#5865F2', '#757e8a', '#3ba55c', '#faa61a', '#ed4245', '#eb459f'];
 
-    return colors[Math.floor(Math.random() * colors.length)];
-  }
+  const brandColors = useMemo(() => {
+    return template.data.roles.map(() => colors[Math.floor(Math.random() * colors.length)]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [template.data.roles]);
 
   return (
     <div
@@ -45,7 +47,7 @@ export default function Members({ template, isMobile, currentlyOpenedSection })
                   toast.success(t('templatePreviewPage.toast.roleColorCopied'));
                 }}
               >
-                <div className='relative flex size-[32px] items-center justify-center rounded-full' style={{ backgroundColor: getRandomBrandColor() }}>
+                <div className='relative flex size-[32px] items-center justify-center rounded-full' style={{ backgroundColor: brandColors[index] }}>
                   <FaDiscord className='text-white' size={20} />
 
                   <span className='absolute -bottom-0.5 -right-1 size-4 rounded-full border-4 border-[#2b2d31] bg-[#3ba55c]' />