From 950f5776a9346aa6b1fbeb4e83156d6cc4dce896 Mon Sep 17 00:00:00 2001
From: Petri Partio <petri.partio@gmail.com>
Date: Fri, 31 May 2024 14:29:48 +0300
Subject: [PATCH] fix: yet another change to tackle mismatch between ssr and
 client side :D

---
 components/TopFade.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/TopFade.tsx b/components/TopFade.tsx
index ec35bdc..ee67776 100644
--- a/components/TopFade.tsx
+++ b/components/TopFade.tsx
@@ -3,16 +3,19 @@
 import { useEffect, useState } from 'react';
 
 const calculatedBrightnessValue = () => {
-  if (typeof window === 'undefined') return 1;
+  if (typeof window === 'undefined') return null;
   if (window.scrollY > 200) return 0.5;
   const amountToDecrease = (window.scrollY / 200) * 0.5;
   return 1 - amountToDecrease;
 };
 
 export default function TopFade() {
-  const [brightness, setBrightness] = useState(calculatedBrightnessValue());
+  const [brightness, setBrightness] = useState<number | null>(null);
 
   useEffect(() => {
+    // Always set correct value when first render on client side
+    setBrightness(calculatedBrightnessValue());
+
     const handleScroll = (event: Event) => {
       if (window.scrollY > 200 && brightness === 0.5) return;
       setBrightness(calculatedBrightnessValue());
@@ -27,9 +30,13 @@ export default function TopFade() {
   return (
     <div
       className="top-fade pointer-events-none"
-      style={{
-        filter: `brightness(${brightness})`,
-      }}
+      style={
+        brightness
+          ? {
+              filter: `brightness(${brightness})`,
+            }
+          : {}
+      }
     ></div>
   );
 }