build(frontend): remove unused dependencies

Author: haxgun

frontend/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     IconBillCheck: typeof import('./src/components/icons/IconBillCheck.vue')['default']
     IconGithub: typeof import('./src/components/icons/IconGithub.vue')['default']
     IconHeart: typeof import('./src/components/icons/IconHeart.vue')['default']
+    IconLoading: typeof import('./src/components/icons/IconLoading.vue')['default']
     IconMagicStick: typeof import('./src/components/icons/IconMagicStick.vue')['default']
     IconPalette: typeof import('./src/components/icons/IconPalette.vue')['default']
     IconTelegram: typeof import('./src/components/icons/IconTelegram.vue')['default']

frontend/package.json

@@ -20,11 +20,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.6.1",
-    "ant-design-vue": "~4.0.7",
-    "axios": "^1.6.1",
     "build-url": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
     "normalize.css": "^8.0.1",

frontend/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Highlights from '@/components/Highlights.vue';
-import { LoadingOutlined } from '@ant-design/icons-vue';
-import { ref, h } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import IconLoading from "@/components/icons/IconLoading.vue";
 
 const isRouterReady = ref<boolean>(false);
 
@@ -11,19 +11,12 @@ const router = useRouter();
 router.isReady().finally(() => {
   isRouterReady.value = true;
 });
-
-const indicator = h(LoadingOutlined, {
-  style: {
-    fontSize: '36px',
-  },
-  spin: true,
-});
 </script>
 
 <template>
   <Highlights />
   <div v-if="!isRouterReady" class="app-loader">
-    <a-spin :indicator="indicator" />
+    <IconLoading />
   </div>
   <router-view v-else v-slot="{ Component }">
     <transition name="slide-fade" mode="out-in">
@@ -34,7 +27,6 @@ const indicator = h(LoadingOutlined, {
 
 <style>
 @import '@/assets/style.scss';
-@import 'ant-design-vue/dist/reset.css';
 </style>
 
 <style lang="scss" scoped>
@@ -52,10 +44,18 @@ const indicator = h(LoadingOutlined, {
   opacity: 0;
 }
 
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
 .app-loader {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
+  overflow: hidden;
 }
 </style>

frontend/src/components/icons/IconLoading.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps({
+  size: {
+    type: Number,
+    default: 48
+  }
+})
+</script>
+
+<template>
+  <span>
+    <svg :width="size" :height="size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150">
+      <path fill="none" stroke="#00C4FA" stroke-width="14" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z">
+        <animate attributeName="stroke-dashoffset" calcMode="spline" dur="2" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite">
+        </animate>
+      </path>
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+span {
+  line-height: 0;
+}
+</style>