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/globalUtils.ts

@@ -1,4 +1,4 @@
-import { type Power3, type gsap } from 'gsap'
+import { type gsap } from 'gsap'
 
 /**
  * utils
@@ -16,9 +16,9 @@ export function expand(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
-export async function loadGsap(): Promise<[typeof gsap, typeof Power3]> {
+export async function loadGsap(): Promise<typeof gsap> {
   const g = await import('gsap')
-  return [g.gsap, g.Power3]
+  return g.gsap
 }
 
 export function getThresholdSessionIndex(): number {
@@ -37,7 +37,11 @@ export function removeDuplicates<T>(arr: T[]): T[] {
  */
 
 export class Watchable<T> {
-  constructor(private obj: T) {}
+  constructor(
+    private obj: T,
+    private readonly lazy: boolean = true
+  ) {}
+
   private readonly watchers: Array<(arg0: T) => void> = []
 
   get(): T {
@@ -45,6 +49,7 @@ export class Watchable<T> {
   }
 
   set(e: T): void {
+    if (e === this.obj && this.lazy) return
     this.obj = e
     this.watchers.forEach((watcher) => {
       watcher(this.obj)