refactor(modules/web): Mirgrat to typescript; fix bugs

modules/web/src/hooks/loading.ts

@@ -0,0 +1,40 @@
+import { watch, unref, onUnmounted } from 'vue'
+import { ElLoading } from 'element-plus'
+import loadingSvg from '@element-plus/icons-svg/loading.svg?raw'
+import 'element-plus/theme-chalk/el-loading.css'
+import './loading.css'
+
+export const useLoading = (
+  target: MaybeRef<string | HTMLElement | undefined>,
+  text: string,
+  spinner = loadingSvg,
+) => {
+  // loading spinner
+  const isLoading = ref(false)
+  let loadingInstance: ReturnType<typeof ElLoading.service> | null = null
+  const closeLoading = () => (isLoading.value = false)
+  const showLoading = () => (isLoading.value = true)
+  watch(isLoading, loading => {
+    if (!loading) return loadingInstance?.close()
+    loadingInstance = ElLoading.service({
+      target: unref(target),
+      spinner: spinner,
+      text: text,
+      lock: true,
+      background: 'rgba(0, 0, 0, 0)',
+    })
+  })
+
+  const loadingWrapper = (promise: Promise<unknown>) => {
+    if (!(promise instanceof Promise))
+      throw TypeError('loadingWrapper argument must be Promise')
+    showLoading()
+    return promise.finally(closeLoading)
+  }
+
+  onUnmounted(() => {
+    closeLoading()
+  })
+
+  return { isLoading, showLoading, closeLoading, loadingWrapper }
+}