feat: add loading indicator for desktop and mobile (#244)

* feat: add new CSS rule for hiding elements

- Add a new CSS rule for the class "hide" with a display property set to "none".

* feat: refactor image loading and navigation logic on desktop

- Add a line of code in `assets/ts/desktop/stage.ts` to reset the `src` of `elc` and add a class `hide` to it
- Add a line of code in `assets/ts/desktop/stage.ts` to call the `loader` function with `elc` as an argument
- Add a function `loader` in `assets/ts/desktop/stage.ts` to handle image loading and error events
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to watch the `isLoading` state and set custom cursor accordingly
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle close click events by calling the `handleClick` function and setting `isLoading` state to false
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next click events by calling the `handleClick` function only if `isLoading` is false
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next hover events by setting `loadedText` and updating custom cursor depending on `isLoading` state

* feat: refactor createGallery function and enhance loading functionality on mobile

- Add a loading text element to the gallery.scss file
- Add a loading indicator to the createGallery function in gallery.ts
- Modify the createGallery function in gallery.ts to hide the loading text element on image load
- Move the image element append logic to the parent container in the createGallery function in gallery.ts

* feat: update translations and add new loading translation in i18n files

* chore: remove css source map

* chore: modify build command to ignore css source map

* refactor: remove unnecessary style

* fix: fix desktop cursor text transition bug

assets/ts/mobile/gallery.ts

@@ -196,14 +196,34 @@ function createGallery(ijs: ImageJSON[]): void {
   for (const ij of ijs) {
     const _swiperSlide = document.createElement('div')
     _swiperSlide.className = 'swiper-slide'
+    // loading indicator
+    const l = document.createElement('div')
+    l.className = 'loadingText'
+    l.innerText =
+      (document.getElementById('main')?.getAttribute('loadingText') as string) + '...'
     // img
     const e = document.createElement('img')
     e.dataset.src = ij.hiUrl
     e.height = ij.hiImgH
     e.width = ij.hiImgW
     e.alt = ij.alt
+    e.classList.add('hide')
+    // load event
+    e.addEventListener(
+      'load',
+      () => {
+        e.classList.remove('hide')
+        l.classList.add('hide')
+      },
+      { once: true, passive: true }
+    )
+    // parent container
+    const p = document.createElement('div')
+    p.className = 'slideContainer'
     // append
-    _swiperSlide.append(e)
+    p.append(e)
+    p.append(l)
+    _swiperSlide.append(p)
     _swiperWrapper.append(_swiperSlide)
   }
   // swiper node