add: loading and empty status componments

src/components/Empty.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const emptyImg = browser.runtime.getURL('/assets/empty.png')
+</script>
+
+<template>
+  <div flex="~" justify="center" items="center">
+    <img :src="emptyImg" w="200px" h="auto">
+  </div>
+</template>

src/components/Loading.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const imgURL = browser.runtime.getURL('/assets/loading.gif')
+</script>
+
+<template>
+  <div
+    w="full"
+    h="46px"
+    p="y-8"
+    flex="~"
+    justify="center"
+    items="center"
+  >
+    <img
+      :src="imgURL"
+      alt="loading"
+      w="46px"
+      h="46px"
+      m="r-2"
+    />
+    {{ $t('home.loading_more') }}
+  </div>
+</template>

src/manifest.ts

@@ -45,7 +45,7 @@ export async function getManifest() {
         js: ['./dist/contentScripts/index.global.js'],
       },
     ],
-    web_accessible_resources: ['dist/contentScripts/style.css'],
+    web_accessible_resources: ['dist/contentScripts/style.css', 'assets/*'],
   }
 
   if (isDev) {