copy button feedback and hmr

next.config.mjs

@@ -13,12 +13,14 @@ const config = {
     domains: ["avatars.githubusercontent.com", "lh3.googleusercontent.com"],
   },
   webpack: (config, { dev, isServer }) => {
-    Object.assign(config.resolve.alias, {
-      "react/jsx-runtime.js": "preact/compat/jsx-runtime",
-      react: "preact/compat",
-      "react-dom/test-utils": "preact/test-utils",
-      "react-dom": "preact/compat",
-    });
+    if (!dev && !isServer) {
+      Object.assign(config.resolve.alias, {
+        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
+        react: "preact/compat",
+        "react-dom/test-utils": "preact/test-utils",
+        "react-dom": "preact/compat",
+      });
+    }
     return config;
   },
 };

src/pages/room/[id].tsx

@@ -71,6 +71,7 @@ const RoomBody: React.FC = () => {
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false);
 
   const { data: roomFromDb, refetch: refetchRoomFromDb } =
     api.room.get.useQuery({ id: roomId });
@@ -201,8 +202,12 @@ const RoomBody: React.FC = () => {
   const copyRoomURLHandler = () => {
     navigator.clipboard
       .writeText(window.location.href)
-      .then(() => {
+      .then(async () => {
         console.log(`Copied Room Link to Clipboard!`);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
       })
       .catch(() => {
         console.log(`Error Copying Room Link to Clipboard!`);
@@ -252,10 +257,14 @@ const RoomBody: React.FC = () => {
           <div>{roomFromDb.id}</div>
 
           <button>
-            <IoCopyOutline
-              className="mx-1 hover:text-primary"
-              onClick={copyRoomURLHandler}
-            ></IoCopyOutline>
+            {copied ? (
+              <IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
+            ) : (
+              <IoCopyOutline
+                className="mx-1 hover:text-primary"
+                onClick={copyRoomURLHandler}
+              ></IoCopyOutline>
+            )}
           </button>
         </div>