feat: loading transition (#277)

* refactor: change hires loader function name

* feat: add loading transition animation and improve performance

* refactor: refactor mutation handling in desktop codebase

- Modify the `initStage` function in `assets/ts/desktop/stage.ts`:
  - Change the `onMutation` callback to accept a single mutation instead of an array of mutations.
  - Update the conditions inside the callback to use `hold` instead of `skip`.
- Modify the `onMutation` function in `assets/ts/desktop/utils.ts`:
  - Change the `callback` parameter to `trigger`.
  - Update the implementation of the function to iterate over each mutation and check if it triggers the `trigger` function. If it does, disconnect the observer and break the loop.

* style: refactor state section and remove unnecessary code

- Remove the declaration of `lastIndex` on line 21
- Add a comment block for the state section
- Add a declaration of `lastIndex` for the state section

* refactor: refactor mobile collection and intersection functions

- Modify the `initCollection` function in `assets/ts/mobile/collection.ts`
- Remove the nested loop in the `initCollection` function
- Modify the `onIntersection` function in `assets/ts/mobile/utils.ts`
- Replace the callback parameter with a trigger parameter in the `onIntersection` function
- Remove the nested loop in the `onIntersection` function

* refactor: refactor Watchable class constructor to include lazy parameter

- Add a second parameter `lazy` in the constructor of the `Watchable` class in `globalUtils.ts`
- Set the default value of `lazy` to `true` in the constructor
- Add a condition to check if `e` is equal to `this.obj` and `this.lazy` is `true` to return in `watch`
- Delete the previous constructor definition in the `Watchable` class in `globalUtils.ts`

* fix: set state's lazy param to false

* refactor: refactor third party lib import

assets/ts/mobile/collection.ts

@@ -64,18 +64,15 @@ export function initCollection(ijs: ImageJSON[]): void {
       { passive: true }
     )
     // preload
-    onIntersection(img, (entries, observer) => {
-      entries.every((entry) => {
-        // no intersection, skip
-        if (entry.intersectionRatio <= 0) return true
-        // preload the i + 5th image
-        if (i + 5 < imgs.length) {
-          imgs[i + 5].src = imgs[i + 5].dataset.src
-        }
-        // disconnect observer and return false to break the loop
-        observer.disconnect()
-        return false
-      })
+    onIntersection(img, (entry) => {
+      // no intersection, hold
+      if (entry.intersectionRatio <= 0) return false
+      // preload the i + 5th image, if it exists
+      if (i + 5 < imgs.length) {
+        imgs[i + 5].src = imgs[i + 5].dataset.src
+      }
+      // triggered
+      return true
     })
   })
 }