refactor: better event listener cleanup (#279)

* refactor: change hires loader function name

* feat: add loading transition animation and improve performance

* refactor: refactor gallery creation and update functions

* feat: create createDivWithClass utility function

* feat: refactor abort signal handling in event listener and promise chain

- Add functionality to set up an abort controller for cleanup
- Add an event listener to abort the controller when necessary
- Modify event listener to include the abort signal
- Modify promise chain to include the abort signal

assets/ts/desktop/stage.ts

@@ -344,6 +344,10 @@ function lores(imgs: DesktopImage[]): void {
 function setLoaderForHiresImage(e: HTMLImageElement): void {
   if (!e.complete) {
     isLoading.set(true)
+    // abort controller for cleanup
+    const controller = new AbortController()
+    const abortSignal = controller.signal
+    // event listeners
     e.addEventListener(
       'load',
       () => {
@@ -355,8 +359,11 @@ function setLoaderForHiresImage(e: HTMLImageElement): void {
           .catch((e) => {
             console.log(e)
           })
+          .finally(() => {
+            controller.abort()
+          })
       },
-      { once: true, passive: true }
+      { once: true, passive: true, signal: abortSignal }
     )
     e.addEventListener(
       'error',
@@ -369,8 +376,11 @@ function setLoaderForHiresImage(e: HTMLImageElement): void {
           .catch((e) => {
             console.log(e)
           })
+          .finally(() => {
+            controller.abort()
+          })
       },
-      { once: true, passive: true }
+      { once: true, passive: true, signal: abortSignal }
     )
   } else {
     _gsap