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 }) => {
+    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>
+            {copied ? (
+              <IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
+            ) : (
               <IoCopyOutline
                 className="mx-1 hover:text-primary"
                 onClick={copyRoomURLHandler}
               ></IoCopyOutline>
+            )}
           </button>
         </div>