From fb9f111b65737fc5d6f317704618df819d8cc7f3 Mon Sep 17 00:00:00 2001
From: Andrew Gillis <gillis.andrew@gmail.com>
Date: Fri, 25 Feb 2022 16:00:20 -0500
Subject: [PATCH] fix(website): force render on client-side (#206)

---
 website/src/components/SVG.tsx    | 59 +++++++++++++++++--------------
 website/src/hooks/useIsBrowser.ts | 12 +++++++
 2 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 website/src/hooks/useIsBrowser.ts

diff --git a/website/src/components/SVG.tsx b/website/src/components/SVG.tsx
index ed9f2fca..b607185a 100644
--- a/website/src/components/SVG.tsx
+++ b/website/src/components/SVG.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PomatezSVG from "../assets/icons/pomatez.svg";
 import DownloadSVG from "../assets/icons/download.svg";
 import SunnySVG from "../assets/icons/sunny.svg";
@@ -10,38 +10,45 @@ import LinuxSVG from "../assets/icons/linux.svg";
 import SnapStoreSVG from "../assets/icons/snap-store.svg";
 import TuxSVG from "../assets/icons/tux.svg";
 import ArrowBackSVG from "../assets/icons/arrow-back.svg";
+import { useIsBrowser } from "../hooks/useIsBrowser";
 
 type Props = {
 	name?: string;
 };
 
 export const SVG: React.FC<Props> = ({ name }) => {
-	switch (name) {
-		case "pomatez":
-			return <PomatezSVG />;
-		case "download":
-			return <DownloadSVG />;
-		case "sunny":
-			return <SunnySVG />;
-		case "moon":
-			return <MoonSVG />;
-		case "github":
-			return <GithubSVG />;
-		case "windows":
-			return <WindowSVG />;
-		case "apple":
-			return <AppleSVG />;
-		case "linux":
-			return <LinuxSVG />;
-		case "snap-store":
-			return <SnapStoreSVG />;
-		case "tux":
-			return <TuxSVG />;
-		case "arrow-back":
-			return <ArrowBackSVG />;
-		default:
-			return <PomatezSVG />;
+	const isBrowser = useIsBrowser();
+
+	if (isBrowser) {
+		switch (name) {
+			case "pomatez":
+				return <PomatezSVG />;
+			case "download":
+				return <DownloadSVG />;
+			case "sunny":
+				return <SunnySVG />;
+			case "moon":
+				return <MoonSVG />;
+			case "github":
+				return <GithubSVG />;
+			case "windows":
+				return <WindowSVG />;
+			case "apple":
+				return <AppleSVG />;
+			case "linux":
+				return <LinuxSVG />;
+			case "snap-store":
+				return <SnapStoreSVG />;
+			case "tux":
+				return <TuxSVG />;
+			case "arrow-back":
+				return <ArrowBackSVG />;
+			default:
+				return <PomatezSVG />;
+		}
 	}
+
+	return null;
 };
 
 export default React.memo(SVG);
diff --git a/website/src/hooks/useIsBrowser.ts b/website/src/hooks/useIsBrowser.ts
new file mode 100644
index 00000000..d8ebed76
--- /dev/null
+++ b/website/src/hooks/useIsBrowser.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export const useIsBrowser = () => {
+	const [isBrowser, setIsBrowser] = useState(false);
+
+	useEffect(() => {
+		setIsBrowser(true);
+		return () => setIsBrowser(false);
+	}, []);
+
+	return isBrowser;
+};