Implement loading (#104)

* Implement loading

* LoadingBar

* Run linter

* Update App.vue

* Loading bar all the things

* Update SplashScreen.vue

* Update SplashScreen.vue

* Update App.vue

* initial revert

* Update Instance.vue

* revert css

* Fix instance

* More reverting

* Run lint

* Finalize changes

* Revert "Merge branch 'master' into loading"

This reverts commit 3014e765fb6fb343f3030fd8a822edd97fb2af41, reversing
changes made to b780e859d2b53a203eb3561ba3be88af083d9c15.

* Fix loading issues

* fix lint

* Revert "Revert "Merge branch 'master' into loading""

This reverts commit 971ef8466613579b7f523edbd25b692df62d0f86.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/pages/Browse.vue

@@ -13,7 +13,6 @@ import {
   Card,
   ClientIcon,
   ServerIcon,
-  AnimatedLogo,
   NavRow,
   formatCategoryHeader,
 } from 'omorphia'
@@ -23,6 +22,7 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
 import { useRoute } from 'vue-router'
 import Instance from '@/components/ui/Instance.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
 
 const route = useRoute()
 
@@ -36,25 +36,28 @@ const breadcrumbs = useBreadcrumbs()
 const showSnapshots = ref(false)
 const loading = ref(true)
 
-const [categories, loaders, availableGameVersions] = await Promise.all([
-  get_categories(),
-  get_loaders(),
-  get_game_versions(),
-])
+const categories = ref([])
+const loaders = ref([])
+const availableGameVersions = ref([])
 
-onMounted(() => {
+onMounted(async () => {
+  ;[categories.value, loaders.value, availableGameVersions.value] = await Promise.all([
+    get_categories(),
+    get_loaders(),
+    get_game_versions(),
+  ])
   breadcrumbs.setContext({ name: 'Browse', link: route.path })
   if (searchStore.projectType === 'modpack') {
     searchStore.instanceContext = null
   }
   searchStore.searchInput = ''
-  handleReset()
-  switchPage(1)
+  await handleReset()
+  loading.value = false
 })
 
 const sortedCategories = computed(() => {
   const values = new Map()
-  for (const category of categories.filter(
+  for (const category of categories.value.filter(
     (cat) =>
       cat.project_type ===
       (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
@@ -67,7 +70,7 @@ const sortedCategories = computed(() => {
   return values
 })
 
-const getSearchResults = async (shouldLoad = false) => {
+const getSearchResults = async () => {
   const queryString = searchStore.getQueryString()
   if (searchStore.instanceContext) {
     showVersions.value = false
@@ -75,16 +78,10 @@ const getSearchResults = async (shouldLoad = false) => {
       searchStore.projectType === 'mod' || searchStore.projectType === 'resourcepack'
     )
   }
-  if (shouldLoad === true) {
-    loading.value = true
-  }
   const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
-  loading.value = false
   searchStore.setSearchResults(response)
 }
 
-getSearchResults(true)
-
 const handleReset = async () => {
   searchStore.currentPage = 1
   searchStore.offset = 0
@@ -309,7 +306,7 @@ watch(
         :count="searchStore.pageCount"
         @switch-page="switchPage"
       />
-      <AnimatedLogo v-if="loading" class="loading" />
+      <SplashScreen v-if="loading" />
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <ProjectCard
           v-for="result in searchStore.searchResults"