epfml · mina5rovic · Feb 22, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/webapp/cypress/e2e/datasetInput.cy.ts b/webapp/cypress/e2e/datasetInput.cy.ts
@@ -4,7 +4,7 @@ import { basicTask, setupServerWith } from "../support/e2e";
 // upstream doesn't yet allow that vuejs/test-utils#2468
 
 function goToDatasetInputStep() {
-  cy.visit("/#/list");
+  cy.visit("/list");
   cy.get(".driver-popover-close-btn").click();
   cy.get("button").contains("participate").click();
   cy.get("button").contains("next").click();

diff --git a/webapp/cypress/e2e/store/models.cy.ts b/webapp/cypress/e2e/store/models.cy.ts
@@ -18,7 +18,7 @@ it("stores models",
   () => {
   setupServerWith(defaultTasks.titanic);
 
-  cy.visit("/#/evaluate");
+  cy.visit("/evaluate");
   cy.contains("button", "download").click();
   cy.contains("button", "test").should("exist");
 
@@ -31,7 +31,7 @@ it("stores larger models",
   () => {
   setupServerWith(defaultTasks.wikitext);
 
-  cy.visit("/#/evaluate");
+  cy.visit("/evaluate");
   cy.contains("button", "download").click();
   cy.contains("button", "test")
     .should("exist")

diff --git a/webapp/cypress/e2e/task-creation.cy.ts b/webapp/cypress/e2e/task-creation.cy.ts
@@ -8,7 +8,7 @@ it("submits with tabular task", () => {
     { statusCode: 200 },
   ).as("posted");
 
-  cy.visit("/#/create");
+  cy.visit("/create");
 
   cy.get('form').should('be.visible'); // Wait for the form to be fully loaded
 

diff --git a/webapp/cypress/e2e/tasks.cy.ts b/webapp/cypress/e2e/tasks.cy.ts
@@ -11,20 +11,20 @@ describe("tasks page", () => {
       defaultTasks.wikitext,
     );
 
-    cy.visit("/#/list").contains("button", "participate");
+    cy.visit("/list").contains("button", "participate");
     cy.get('div[id="tasks"]').children().should("have.length", 4);
   });
 
   it("redirects to training", () => {
     setupServerWith(defaultTasks.titanic);
 
-    cy.visit("/#/list").contains("button", "participate");
+    cy.visit("/list").contains("button", "participate");
     cy.get(".driver-popover-close-btn").click();
     cy.get(`div[id="titanic"]`).find("button").click();
-    cy.url().should("eq", `${Cypress.config().baseUrl}#/titanic`);
+    cy.url().should("eq", `${Cypress.config().baseUrl}titanic`);
 
     cy.contains("button", "previous").click();
-    cy.url().should("eq", `${Cypress.config().baseUrl}#/list`);
+    cy.url().should("eq", `${Cypress.config().baseUrl}list`);
   });
 
   it("displays error message", () => {
@@ -33,7 +33,7 @@ describe("tasks page", () => {
       { statusCode: 404 },
     );
 
-    cy.visit("/#/list");
+    cy.visit("/list");
     cy.contains("button", "reload page");
   });
 });
diff --git a/webapp/cypress/e2e/testing.cy.ts b/webapp/cypress/e2e/testing.cy.ts
@@ -5,7 +5,7 @@ import { setupServerWith } from "../support/e2e";
 it("can test titanic", () => {
   setupServerWith(defaultTasks.titanic);
 
-  cy.visit("/#/evaluate");
+  cy.visit("/evaluate");
   cy.contains("button", "download").click();
   cy.contains("button", "test").click();
 
@@ -26,7 +26,7 @@ it("can test titanic", () => {
 it("can test lus_covid", () => {
   setupServerWith(defaultTasks.lusCovid);
 
-  cy.visit("/#/evaluate");
+  cy.visit("/evaluate");
   cy.contains("button", "download").click();
   cy.contains("button", "test").click();
 
@@ -47,7 +47,7 @@ it("can test lus_covid", () => {
 it("can start and stop testing of wikitext", () => {
   setupServerWith(defaultTasks.wikitext);
 
-  cy.visit("/#/evaluate");
+  cy.visit("/evaluate");
   cy.contains("button", "download").click();
   cy.contains("button", "test").click();
 

diff --git a/webapp/public/404.html b/webapp/public/404.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DISCO</title>
+    <script>
+        // GitHub Pages SPA redirect workaround
+        // Save the current path before reloading
+        sessionStorage.redirect = location.pathname + location.search;
+        location.href = '/';
+    </script>
+</head>
+<body>
+</body>
+</html>
+
diff --git a/webapp/src/components/App.vue b/webapp/src/components/App.vue
@@ -56,14 +56,25 @@
 </template>
 
 <script lang="ts" setup>
-import { RouterView, useRoute } from "vue-router";
+import { onMounted } from "vue";
+import { RouterView, useRoute, useRouter } from "vue-router";
 
 import { useThemeStore } from "@/store";
 import BaseLayout from "./containers/BaseLayout.vue";
 import SideBar from "@/components/sidebar/SideBar.vue";
 
 const route = useRoute();
+const router = useRouter();
 
 const themeStore = useThemeStore();
 const themeClass = themeStore.selectByTheme("", "dark");
+
+// Handle GitHub Pages SPA redirect - navigate to pending route if it exists
+onMounted(() => {
+  const pendingRoute = sessionStorage.pendingRoute;
+  if (pendingRoute) {
+    delete sessionStorage.pendingRoute;
+    void router.push(pendingRoute);
+  }
+});
 </script>
diff --git a/webapp/src/components/training/TrainingSteps.vue b/webapp/src/components/training/TrainingSteps.vue
@@ -1,5 +1,18 @@
 <template>
-  <div v-if="task !== undefined">
+  <!-- Show loading indicator while tasks are being fetched -->
+  <div
+    v-if="isLoading"
+    class="my-10 flex flex-col justify-center items-center w-full"
+  >
+    <VueSpinner size="50" color="#6096BA" />
+    <div class="mt-10 flex flex-col justify-center items-center">
+      <p class="text-disco-blue">Loading the <DISCOllaborative /></p>
+      <p class="text-disco-blue text-xs">This can take a few seconds</p>
+    </div>
+  </div>
+
+  <!-- Show task content once loaded -->
+  <div v-else-if="task !== undefined">
     <TrainingDescription v-show="trainingStore.step === 1" :task />
 
     <div
@@ -29,6 +42,7 @@
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, toRaw, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { VueSpinner } from "vue3-spinners";
 
 import type {
   Dataset,
@@ -42,6 +56,7 @@ import type {
 import type { LabeledDataset } from "@/components/dataset_input/types.js";
 import DataDescription from "@/components/dataset_input/DataDescription.vue";
 import LabeledDatasetInput from "@/components/dataset_input/LabeledDatasetInput.vue";
+import DISCOllaborative from "@/components/simple/DISCOllaborative.vue";
 import TrainingButtons from "@/components/progress_bars/TrainingButtons.vue";
 import TrainingDescription from "@/components/training/TrainingDescription.vue";
 import TrainingFinished from "@/components/training/TrainingFinished.vue";
@@ -63,17 +78,28 @@ function setupTrainingStore() {
   trainingStore.setTask(route.params.id as string); // more reliable than props.id
   trainingStore.setStep(1);
 }
+
+// Check if tasks are still loading
+const isLoading = computed<boolean>(() => {
+  return typeof tasks.value === "string";
+});
+
 // Init the task once the taskStore has been loaded successfully
-// If it is not we redirect to the task list
+// If it is not available we redirect to not-found
 const task = computed<Task<DataType, Network> | undefined>(() => {
-  if (typeof tasks.value !== "string") return tasks.value.get(props.id);
+  if (typeof tasks.value === "string") {
+    // Tasks are still loading, return undefined to show loading indicator
+    return undefined;
+  }
 
-  // Redirect to the task list if not loaded yet
-  // This happens when refreshing the page, every task are reset when fetched
-  if (route.name !== "task-list") {
-    void router.replace({ name: "task-list" });
+  const foundTask = tasks.value.get(props.id);
+
+  // Redirect to not-found if tasks have loaded but this specific task doesn't exist
+  if (foundTask === undefined) {
+    void router.replace({ name: "not-found" });
   }
-  return undefined;
+
+  return foundTask;
 });
 
 // Addresses the case when users enter a url manually

diff --git a/webapp/src/main.ts b/webapp/src/main.ts
@@ -16,6 +16,15 @@ const debug = createDebug("webapp");
 import { plugin as VueTippy } from 'vue-tippy'
 import 'tippy.js/dist/tippy.css' // optional for styling
 
+// Handle GitHub Pages SPA redirect
+const redirect = sessionStorage.redirect;
+if (redirect) {
+  delete sessionStorage.redirect;
+  // Navigate to the original path that triggered the redirect
+  // The router will be pushed to this path after Vue mounts
+  sessionStorage.pendingRoute = redirect;
+}
+
 tf.ready()
   .then(() => debug(`loaded TFJS' ${tf.getBackend()} backend`))
   .catch((e) => debug("while loading TFJS's backend: %o", e))

diff --git a/webapp/src/router/router.ts b/webapp/src/router/router.ts
@@ -1,5 +1,5 @@
 import createDebug from "debug";
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { scrollToTop } from "@/utils";
 
 import TrainingBar from '@/components/progress_bars/TrainingBar.vue'
@@ -15,7 +15,7 @@ import AboutUs from '@/components/pages/AboutUs.vue'
 const debug = createDebug("webapp:router");
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   scrollBehavior(_to, _from, _savedPosition) {
     // Always scroll to top when navigating to a new page
     // Because router is wrapped in a BaseLayout, returning { top: 0 } doesn't do anything