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"

theseus_gui/src/pages/Index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef, onUnmounted } from 'vue'
+import { ref, onUnmounted, shallowRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -16,7 +16,7 @@ const breadcrumbs = useBreadcrumbs()
 
 breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 
-const recentInstances = shallowRef()
+const recentInstances = shallowRef(Object.values(await list()))
 
 const getInstances = async () => {
   filter.value = ''

theseus_gui/src/pages/Library.vue

@@ -4,6 +4,7 @@ import GridDisplay from '@/components/GridDisplay.vue'
 import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { loading_listener } from '@/helpers/events.js'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -17,12 +18,21 @@ const instances = shallowRef(
 const modpacks = shallowRef(
   Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
 )
+
+loading_listener(async (profile) => {
+  console.log(profile)
+  if (profile.event === 'loaded') {
+    const profiles = await list()
+    instances.value = Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
+    modpacks.value = Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
+  }
+})
 </script>
 
 <template>
   <div>
-    <GridDisplay label="Instances" :instances="instances" />
-    <GridDisplay label="Modpacks" :instances="modpacks" />
+    <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+    <GridDisplay v-if="modpacks.length > 0" label="Modpacks" :instances="modpacks" />
   </div>
 </template>
 

theseus_gui/src/pages/Settings.vue

@@ -28,8 +28,8 @@ if (!fetchSettings.java_globals?.JAVA_8)
   fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
 if (!fetchSettings.java_globals?.JAVA_17)
   fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
-
 const settings = ref(fetchSettings)
+
 const chosenInstallOptions = ref([])
 const browsingInstall = ref(0)
 

theseus_gui/src/pages/instance/Index.vue

@@ -68,9 +68,9 @@ import {
   get_uuids_by_profile_path,
   kill_by_uuid,
 } from '@/helpers/process'
-import { process_listener } from '@/helpers/events'
+import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute } from 'vue-router'
-import { shallowRef, ref, onUnmounted } from 'vue'
+import { ref, onUnmounted } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { open } from '@tauri-apps/api/dialog'
 import { useBreadcrumbs, useSearch } from '@/store/state'
@@ -79,15 +79,21 @@ const route = useRoute()
 const searchStore = useSearch()
 const breadcrumbs = useBreadcrumbs()
 
-const instance = shallowRef(await get(route.params.id))
-searchStore.instanceContext = instance.value
+const instance = ref(await get(route.params.id))
 
+searchStore.instanceContext = instance.value
 breadcrumbs.setName('Instance', instance.value.metadata.name)
 breadcrumbs.setContext({
   name: instance.value.metadata.name,
   link: route.path,
 })
 
+profile_listener(async (event) => {
+  if (event.profile_path === route.params.id) {
+    instance.value = await get(route.params.id)
+  }
+})
+
 const uuid = ref(null)
 const playing = ref(false)
 const loading = ref(false)

theseus_gui/src/pages/project/Gallery.vue

@@ -164,7 +164,7 @@ const expandImage = (item, index) => {
 
 .expanded-image-modal {
   position: fixed;
-  z-index: 20;
+  z-index: 10;
   overflow: auto;
   top: 0;
   left: 0;

theseus_gui/src/pages/project/Index.vue

@@ -291,7 +291,7 @@ async function install(version) {
         .map((value) => value.metadata)
         .find((pack) => pack.linked_data?.project_id === data.value.id)
     ) {
-      let id = await packInstall(queuedVersionData.id)
+      let id = await packInstall(queuedVersionData.id, data.value.title)
       await router.push({ path: `/instance/${encodeURIComponent(id)}` })
     } else {
       confirmModal.value.show(queuedVersionData.id)