Add proper error handling and loading screen

src/views/HomepageView.vue

@@ -1,15 +1,16 @@
 <script lang="ts">
 import { ref, type Ref } from 'vue'
 import StreamPreviewVue from '@/components/StreamPreview.vue'
+import ErrorMessage from '@/components/ErrorMessage.vue'
+import LoadingScreen from '@/components/LoadingScreen.vue'
 
 export default {
   async setup() {
     const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
     
-    const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover`)
-    let data: Ref<any[] | undefined> = ref()
+    let data: Ref<any | undefined> = ref()
     let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
-    data.value = await res.json()
+  
 
     return {
       data,
@@ -29,8 +30,8 @@ export default {
     },
 
     filterSearches(toFilter: string) {
-      const categories = this.$refs.categoryItem
-      const wantedTags = toFilter.split(',').filter((v) => v.toLowerCase())
+      const categories: HTMLCollectionOf<Element> = this.$refs.categoryItem as HTMLCollectionOf<Element>
+      const wantedTags: string[] = toFilter.split(',').filter((v) => v.toLowerCase())
 
       for (let category of categories as any) {
         let tagElements = category.getElementsByTagName('span')
@@ -67,6 +68,9 @@ export default {
           const res = await fetch(
             `${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/?cursor=${cursor}`
           )
+          if (!res.ok) {
+            throw new Error('Failed to fetch data')
+          }
           const data = await res.json()
 
           for (let category of data) {
@@ -76,7 +80,7 @@ export default {
       }
     }
   },
-  mounted() {
+  async mounted() {
     this.getNextCategory()
 
     let following = localStorage.getItem('following')
@@ -85,15 +89,33 @@ export default {
     } else {
       this.following = []
     }
+
+    try {
+      const res = await fetch(`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover`)
+      if (!res.ok) {
+        throw new Error('Failed to fetch data')
+      }
+      this.data = await res.json()
+    } catch (error) {
+      console.error(error)
+      this.data = { status: 'error' }
+    }
+
   },
   components: {
-    StreamPreviewVue
+    StreamPreviewVue,
+    ErrorMessage,
+    LoadingScreen
   }
 }
 </script>
 
 <template>
-  <div class="max-w-5xl mx-auto">
+
+  <loading-screen v-if="!data"></loading-screen>
+  <error-message v-else-if="data.status === 'error'"></error-message>
+
+  <div v-else class="max-w-5xl mx-auto">
     <div v-if="following.length > 0" class="p-2 text-white">
       <h1 class="font-bold text-5xl">Following</h1>
       <p class="text-xl">Streamers you follow</p>