From db09d5e275cc2cafba276833b0e28062d0f47749 Mon Sep 17 00:00:00 2001
From: David Ernst <git@dsernst.com>
Date: Wed, 13 Mar 2024 17:25:12 -0700
Subject: [PATCH] Custom <NoSsr /> component, to move away from MUI

---
 src/_shared/NoSsr.tsx | 25 +++++++++++++++++++++++++
 src/gAnalytics.tsx    |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/_shared/NoSsr.tsx

diff --git a/src/_shared/NoSsr.tsx b/src/_shared/NoSsr.tsx
new file mode 100644
index 00000000..88786691
--- /dev/null
+++ b/src/_shared/NoSsr.tsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+interface NoSSRProps {
+  /** The content to render on client. */
+  children?: React.JSX.Element | React.JSX.Element[]
+  /** Optional content to show before the component renders on client. This renders during server-side rendering (SSR). */
+  onSSR?: React.FC
+}
+
+const EmptySpan = () => <span />
+
+export const NoSsr = (props: NoSSRProps) => {
+  const { onSSR = EmptySpan, children = <EmptySpan /> } = props
+
+  const [isMounted, setIsMounted] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+    return () => {
+      setIsMounted(false)
+    }
+  })
+
+  return isMounted ? <>{children}</> : onSSR({})
+}
diff --git a/src/gAnalytics.tsx b/src/gAnalytics.tsx
index e403607a..6beda092 100644
--- a/src/gAnalytics.tsx
+++ b/src/gAnalytics.tsx
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/material'
+import { NoSsr } from 'src/_shared/NoSsr'
 
 const GA_ID = 'UA-84279342-7'