Refactor task execution to use low priority queue and improve loading state in Home.vue

backend/endpoints/tasks.py

@@ -11,6 +11,7 @@ from endpoints.responses import MessageResponse
 from endpoints.responses.tasks import GroupedTasksDict, TaskInfoDict
 from fastapi import HTTPException, Request
 from handler.auth.constants import Scope
+from handler.redis_handler import low_prio_queue
 from logger.logger import log
 from utils.router import APIRouter
 
@@ -132,24 +133,10 @@ async def run_all_tasks(request: Request) -> MessageResponse:
     if not runnable_tasks:
         return {"msg": "No runnable tasks available to run"}
 
-    failed_tasks = []
-    successful_tasks = []
-
     for task_name, task_instance in runnable_tasks.items():
-        try:
-            await task_instance.run()
-            successful_tasks.append(task_name)
-        except Exception as e:
-            failed_tasks.append(f"{task_name}: {str(e)}")
+        low_prio_queue.enqueue(task_instance.run)
 
-    if failed_tasks:
-        return {
-            "msg": f"Some tasks failed. Successful: {', '.join(successful_tasks)}. Failed: {', '.join(failed_tasks)}"
-        }
-
-    return {
-        "msg": f"All {len(successful_tasks)} triggerable tasks ran successfully: {', '.join(successful_tasks)}"
-    }
+    return {"msg": "All tasks launched. Check the worker logs for details."}
 
 
 @protected_route(router.post, "/run/{task_name}", [Scope.TASKS_RUN])
@@ -179,11 +166,5 @@ async def run_single_task(request: Request, task_name: str) -> MessageResponse:
             status_code=400,
             detail=f"Task '{task_name}' is not triggerable manually.",
         )
-
-    try:
-        await task_instance.run()
-        return {"msg": f"Task '{task_name}' ran successfully!"}
-    except Exception as e:
-        raise HTTPException(
-            status_code=500, detail=f"Task '{task_name}' failed: {str(e)}"
-        ) from e
+    low_prio_queue.enqueue(task_instance.run)
+    return {"msg": f"Task '{task_name}' launched. Check the worker logs for details."}

frontend/src/views/Home.vue

@@ -97,38 +97,50 @@ onMounted(async () => {
 </script>
 
 <template>
-  <template v-if="!isEmpty">
-    <stats v-if="showStats" />
-    <recent-skeleton-loader
-      v-if="showRecentSkeleton"
-      :title="t('home.recently-added')"
-      class="ma-2"
-    />
-    <recent-added
-      v-else-if="recentRoms.length > 0 && showRecentRoms"
-      class="ma-2"
-    />
-    <recent-skeleton-loader
-      v-if="showContinuePlayingSkeleton"
-      :title="t('home.continue-playing')"
-      class="ma-2"
-    />
-    <continue-playing
-      v-else-if="recentPlayedRoms.length > 0 && showContinuePlaying"
-      class="ma-2"
-    />
-    <platforms
-      v-if="filledPlatforms.length > 0 && showPlatforms"
-      class="ma-2"
-    />
-    <collections
-      v-if="allCollections.length > 0 && showCollections"
-      class="ma-2"
-    />
-    <virtual-collections
-      v-if="virtualCollections.length > 0 && showVirtualCollections"
-      class="ma-2"
-    />
+  <template v-if="fetchingRecentAdded || fetchingContinuePlaying">
+    <div class="d-flex align-center justify-center fill-height">
+      <v-progress-circular
+        color="primary"
+        :width="4"
+        size="120"
+        indeterminate
+      />
+    </div>
+  </template>
+  <template v-if="!fetchingRecentAdded && !fetchingContinuePlaying">
+    <template v-if="!isEmpty">
+      <stats v-if="showStats" />
+      <recent-skeleton-loader
+        v-if="showRecentSkeleton"
+        :title="t('home.recently-added')"
+        class="ma-2"
+      />
+      <recent-added
+        v-else-if="recentRoms.length > 0 && showRecentRoms"
+        class="ma-2"
+      />
+      <recent-skeleton-loader
+        v-if="showContinuePlayingSkeleton"
+        :title="t('home.continue-playing')"
+        class="ma-2"
+      />
+      <continue-playing
+        v-else-if="recentPlayedRoms.length > 0 && showContinuePlaying"
+        class="ma-2"
+      />
+      <platforms
+        v-if="filledPlatforms.length > 0 && showPlatforms"
+        class="ma-2"
+      />
+      <collections
+        v-if="allCollections.length > 0 && showCollections"
+        class="ma-2"
+      />
+      <virtual-collections
+        v-if="virtualCollections.length > 0 && showVirtualCollections"
+        class="ma-2"
+      />
+    </template>
+    <empty-home v-else />
   </template>
-  <empty-home v-else />
 </template>