Adding gradient on the clientside

components/common/Avatar/Avatar.tsx

@@ -1,5 +1,12 @@
 import cn from 'classnames'
-import { FC, useState } from 'react'
+import {
+  FC,
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+  HTMLInputElement,
+} from 'react'
 import { getRandomPairOfColors } from '@lib/colors'
 
 interface Props {
@@ -8,14 +15,19 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
-  const [bg] = useState(getRandomPairOfColors)
+  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
+  const ref = useRef(null) as React.MutableRefObject<HTMLInputElement>
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
+    }
+  }, [bg])
 
   return (
     <div
+      ref={ref}
       className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
-      style={{
-        backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
-      }}
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>