More efficent listeners when possible

components/system/Desktop/Wallpapers/useWallpaper.ts

@@ -11,7 +11,7 @@ import { useFileSystem } from "contexts/fileSystem";
 import { useSession } from "contexts/session";
 import useWorker from "hooks/useWorker";
 import { useCallback, useEffect } from "react";
-import { MILLISECONDS_IN_DAY } from "utils/constants";
+import { MILLISECONDS_IN_DAY, ONE_TIME_PASSIVE_EVENT } from "utils/constants";
 import {
   bufferToUrl,
   cleanUpBufferUrl,
@@ -177,11 +177,14 @@ const useWallpaper = (
       if (fallbackBackground) {
         const img = document.createElement("img");
 
-        img.addEventListener("error", () =>
-          desktopRef.current?.setAttribute(
-            "style",
-            wallpaperStyle(fallbackBackground)
-          )
+        img.addEventListener(
+          "error",
+          () =>
+            desktopRef.current?.setAttribute(
+              "style",
+              wallpaperStyle(fallbackBackground)
+            ),
+          ONE_TIME_PASSIVE_EVENT
         );
         img.src = wallpaperUrl;
       }

components/system/Dialogs/Transfer/index.tsx

@@ -4,6 +4,7 @@ import StyledTransfer from "components/system/Dialogs/Transfer/StyledTransfer";
 import type { FileReaders } from "components/system/Dialogs/Transfer/useTransferDialog";
 import { useProcesses } from "contexts/process";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ONE_TIME_PASSIVE_EVENT } from "utils/constants";
 
 const MAX_TITLE_LENGTH = 37;
 
@@ -23,19 +24,27 @@ const Dialog: FC<ComponentProcessProps> = ({ id }) => {
 
       setCurrentTransfer([directory, file]);
 
-      reader.addEventListener("progress", ({ loaded = 0 }) => {
-        const progressLoaded = loaded - fileProgress;
+      reader.addEventListener(
+        "progress",
+        ({ loaded = 0 }) => {
+          const progressLoaded = loaded - fileProgress;
 
-        setProgress((currentProgress) => currentProgress + progressLoaded);
-        fileProgress = loaded;
-      });
-      reader.addEventListener("loadend", () => {
-        if (remainingReaders.length > 0) {
-          processReader(remainingReaders);
-        } else {
-          closeWithTransition(id);
-        }
-      });
+          setProgress((currentProgress) => currentProgress + progressLoaded);
+          fileProgress = loaded;
+        },
+        { passive: true }
+      );
+      reader.addEventListener(
+        "loadend",
+        () => {
+          if (remainingReaders.length > 0) {
+            processReader(remainingReaders);
+          } else {
+            closeWithTransition(id);
+          }
+        },
+        ONE_TIME_PASSIVE_EVENT
+      );
       reader.readAsArrayBuffer(file);
     },
     [closeWithTransition, id]

components/system/Files/FileEntry/index.tsx

@@ -36,6 +36,7 @@ import {
   IMAGE_FILE_EXTENSIONS,
   MOUNTABLE_EXTENSIONS,
   NON_BREAKING_HYPHEN,
+  ONE_TIME_PASSIVE_EVENT,
   PREVENT_SCROLL,
   SHORTCUT_EXTENSION,
   SHORTCUT_ICON,
@@ -283,7 +284,13 @@ const FileEntry: FC<FileEntryProps> = ({
             };
 
             if (iconRef.current.complete) cacheIcon();
-            else iconRef.current.addEventListener("load", cacheIcon);
+            else {
+              iconRef.current.addEventListener(
+                "load",
+                cacheIcon,
+                ONE_TIME_PASSIVE_EVENT
+              );
+            }
           }
         } else if (getIcon) {
           const cachedIconPath = join(ICON_CACHE, `${path}.cache`);

components/system/Window/RndWindow/index.tsx

@@ -9,7 +9,7 @@ import {
   PROCESS_DELIMITER,
   TRANSITIONS_IN_MILLISECONDS,
 } from "utils/constants";
-import { pxToNum } from "utils/functions";
+import { haltEvent, pxToNum } from "utils/functions";
 
 type RndWindowProps = {
   id: string;
@@ -20,7 +20,7 @@ const reRouteFocus =
   (focusElement?: HTMLElement) =>
   (element?: Element): void => {
     element?.setAttribute("tabindex", FOCUSABLE_ELEMENT.tabIndex.toString());
-    element?.addEventListener("contextmenu", (event) => event.preventDefault());
+    element?.addEventListener("contextmenu", haltEvent);
     element?.addEventListener("mousedown", (event) => {
       event.preventDefault();
       focusElement?.focus(PREVENT_SCROLL);

contexts/fileSystem/functions.ts

@@ -1,7 +1,7 @@
 import { openDB } from "idb";
 import { join } from "path";
 import index from "public/.index/fs.9p.json";
-import { FS_HANDLES } from "utils/constants";
+import { FS_HANDLES, ONE_TIME_PASSIVE_EVENT } from "utils/constants";
 
 type BFSFS = { [key: string]: BFSFS | null };
 type FS9PV3 = [
@@ -103,17 +103,21 @@ export const supportsIndexedDB = (): Promise<boolean> =>
   new Promise((resolve) => {
     const db = window.indexedDB.open("");
 
-    db.addEventListener("error", () => resolve(false));
-    db.addEventListener("success", () => {
-      resolve(true);
+    db.addEventListener("error", () => resolve(false), ONE_TIME_PASSIVE_EVENT);
+    db.addEventListener(
+      "success",
+      () => {
+        resolve(true);
 
-      try {
-        db.result.close();
-        window.indexedDB.deleteDatabase("");
-      } catch {
-        // Ignore errors to close/delete the test database
-      }
-    });
+        try {
+          db.result.close();
+          window.indexedDB.deleteDatabase("");
+        } catch {
+          // Ignore errors to close/delete the test database
+        }
+      },
+      ONE_TIME_PASSIVE_EVENT
+    );
   });
 
 const getKeyValStore = (): ReturnType<typeof openDB> =>

hooks/useWorker.ts

@@ -12,7 +12,9 @@ const useWorker = <T>(
       worker.current = workerInit(workerInfo);
 
       if (onMessage) {
-        worker.current.addEventListener("message", onMessage);
+        worker.current.addEventListener("message", onMessage, {
+          passive: true,
+        });
       }
 
       worker.current.postMessage("init");