From eb98cc6bd725ce2fff3015d658158e557263cae4 Mon Sep 17 00:00:00 2001
From: Raj Sharma <raj@tokio.space>
Date: Sun, 18 Feb 2024 20:56:51 +0530
Subject: [PATCH] fix: fixed perf issues

---
 src/app/(home)/Connect.tsx           |  7 +++++--
 src/app/(home)/page.tsx              |  9 +++------
 src/components/clock.tsx             | 10 +++++++++-
 src/components/gradient-provider.tsx |  5 +++--
 src/components/grain.tsx             |  6 +++++-
 src/components/notion/renderer.tsx   | 11 +++++++++--
 6 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/app/(home)/Connect.tsx b/src/app/(home)/Connect.tsx
index ce65965..3613811 100644
--- a/src/app/(home)/Connect.tsx
+++ b/src/app/(home)/Connect.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { nanoid, customAlphabet } from "nanoid";
+import { customAlphabet } from "nanoid";
 
 const generate = customAlphabet("abcdefghijklmnopqrstuvwxyz", 9);
 
@@ -37,7 +37,10 @@ export function Connect() {
             className="flex items-center text-primary justify-center"
             href={`mailto:${random_id}@raj.how`}
           >
-            <span className="w-[68px] overflow-hidden font-mono tabular-nums text-right">
+            <span
+              suppressHydrationWarning
+              className="w-[68px] overflow-hidden font-mono tabular-nums text-right"
+            >
               {random_id}
             </span>
             <span>@raj.how</span>
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index cf85db1..dc9f8d8 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,13 +1,10 @@
-import {
-  BackgroundGradentProvider,
-  GradientProvider,
-  SymetricGradProvider,
-} from "@/components/gradient-provider";
+import { BackgroundGradentProvider } from "@/components/gradient-provider";
 import GrainProvider from "@/components/grain";
 import { StyledNotion } from "@/components/notion/styled";
 import { ExternalLink, Sparkle } from "lucide-react";
 import { Footer } from "./Footer";
 import { Connect } from "./Connect";
+import { motion } from "framer-motion";
 
 export default function Page() {
   return (
@@ -91,7 +88,7 @@ function Stories() {
           My tech blogs and other writings.
         </p>
       </div>
-      <StyledNotion blockId="d149cfb269aa4a5699bbf919a1b0b137" />
+      <StyledNotion className="" blockId="d149cfb269aa4a5699bbf919a1b0b137" />
     </div>
   );
 }
diff --git a/src/components/clock.tsx b/src/components/clock.tsx
index 5599428..46a3476 100644
--- a/src/components/clock.tsx
+++ b/src/components/clock.tsx
@@ -27,7 +27,12 @@ const Clock: React.FC = () => {
   const seconds = time.getSeconds();
 
   return (
-    <svg width="18px" height="18px" viewBox="0 0 100 100">
+    <svg
+      suppressHydrationWarning
+      width="18px"
+      height="18px"
+      viewBox="0 0 100 100"
+    >
       <circle
         cx="50"
         cy="50"
@@ -41,6 +46,7 @@ const Clock: React.FC = () => {
         y1="50"
         x2="50"
         y2="20"
+        suppressHydrationWarning
         transform={calculateRotation(hours, true)}
         stroke="black"
         strokeWidth="4"
@@ -50,6 +56,7 @@ const Clock: React.FC = () => {
         y1="50"
         x2="50"
         y2="15"
+        suppressHydrationWarning
         transform={calculateRotation(minutes)}
         stroke="black"
         strokeWidth="4"
@@ -59,6 +66,7 @@ const Clock: React.FC = () => {
         y1="50"
         x2="50"
         y2="10"
+        suppressHydrationWarning
         transform={calculateRotation(seconds)}
         stroke="black"
         strokeWidth="2"
diff --git a/src/components/gradient-provider.tsx b/src/components/gradient-provider.tsx
index 64d22df..d0e5f10 100644
--- a/src/components/gradient-provider.tsx
+++ b/src/components/gradient-provider.tsx
@@ -60,9 +60,10 @@ export function BackgroundGradentProvider({
       )}
     >
       <motion.div
+        // blur and fade in
+        initial={{ opacity: 0, filter: "blur(10px)" }}
+        animate={{ opacity: 1, filter: "blur(0px)" }}
         className="w-full h-full"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
       >
         <Image
           className="w-full h-full object-cover"
diff --git a/src/components/grain.tsx b/src/components/grain.tsx
index ce45336..3cd8b9c 100644
--- a/src/components/grain.tsx
+++ b/src/components/grain.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "framer-motion";
 import React, { useEffect, useRef, useCallback } from "react";
 
 type GrainOptions = {
@@ -81,7 +82,10 @@ export const GrainProvider = ({
   }, [animate]);
 
   return (
-    <canvas
+    <motion.canvas
+      initial={{ opacity: 0, filter: "blur(10px)" }}
+      animate={{ opacity: 1, filter: "blur(0px)" }}
+      transition={{ duration: 2 }}
       ref={canvasRef}
       id="grained-canvas"
       className="fixed left-0 top-0 inset-0 z-50 pointer-events-none w-full h-full"
diff --git a/src/components/notion/renderer.tsx b/src/components/notion/renderer.tsx
index f0db1a8..ee713b3 100644
--- a/src/components/notion/renderer.tsx
+++ b/src/components/notion/renderer.tsx
@@ -3,6 +3,8 @@ import { type ExtendedRecordMap } from "notion-types";
 import dynamic from "next/dynamic";
 
 import { NotionRenderer } from "react-notion-x";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
 
 const Code = dynamic(() =>
   import("react-notion-x/build/third-party/code").then((m) => m.Code),
@@ -33,7 +35,12 @@ export function NRenderer({
   fullPage?: boolean;
 }) {
   return (
-    <div className={className}>
+    <motion.div
+      // blur and fade in and animate height to auto
+      initial={{ opacity: 0, filter: "blur(10px)" }}
+      animate={{ opacity: 1, filter: "blur(0px)" }}
+      className={cn("", className)}
+    >
       <NotionRenderer
         components={{
           Code,
@@ -45,6 +52,6 @@ export function NRenderer({
         fullPage={fullPage}
         recordMap={recordMap}
       />
-    </div>
+    </motion.div>
   );
 }