Update UI to handle loading and error states for data fetch

Introduced conditional UI components to display loading and error messages during data fetching. Integrated the data store to manage state and added lifecycle hooks for starting and stopping auto-refresh. These changes improve user experience and ensure better feedback during data operations.

frontend/src/App.vue

@@ -4,9 +4,19 @@
       <main-nav />
 
       <v-main>
-        <build-server-stats />
-        <currently-building />
-        <packages />
+        <v-sheet v-if="!lastUpdated || isLoading" class="mt-2" color="transparent">
+          <h5 class="text-h5">Fetching Data</h5>
+        </v-sheet>
+
+        <v-sheet v-else-if="error" class="mt-2" color="transparent">
+          <h5 class="text-h5">Can't fetch data. Please try again later</h5>
+        </v-sheet>
+
+        <template v-else>
+          <build-server-stats />
+          <currently-building />
+          <packages />
+        </template>
       </v-main>
     </v-container>
   </v-app>
@@ -15,6 +25,25 @@
 <script lang="ts" setup>
 import MainNav from '@/components/MainNav.vue'
 import BuildServerStats from '@/components/BuildServerStats.vue'
-import Packages from '@/components/Packages.vue'
 import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
+import Packages from '@/components/Packages.vue'
+import { useDataStore } from '@/stores/dataStore'
+import { computed, onMounted, onUnmounted } from 'vue'
+
+const dataStore = useDataStore()
+
+const isLoading = computed(() => dataStore.loading)
+const error = computed(() => dataStore.error)
+const lastUpdated = computed(() => {
+  if (!dataStore.data) return null
+  return dataStore.data.lastUpdated
+})
+
+onMounted(async () => {
+  await dataStore.startAutoRefresh()
+})
+
+onUnmounted(() => {
+  dataStore.stopAutoRefresh()
+})
 </script>