From 57b94b851937991f5fdcbfa40396feae3e735e2f Mon Sep 17 00:00:00 2001
From: Christian Touoyim <touoyim14christian@gmail.com>
Date: Wed, 17 Jun 2026 14:39:18 +0200
Subject: [PATCH 1/5] fixes the sequencing issue

---
 app/src/pages/SingleContent/SingleContent.vue | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 02adbfd19d..18d38f0e3c 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -222,7 +222,7 @@ const currentParentId = ref<string>("");
 const isLoadingTranslations = ref(false);
 
 watch([content, isConnected], async () => {
-    if (!content.value) return;
+    if (!content.value || content.value === defaultContent) return;
 
     // Only reload translations if we're viewing a different parent content
     // This prevents flash when switching between translations of the same content
@@ -255,14 +255,13 @@ watch([content, isConnected], async () => {
         mangoToDexie(db.docs, { selector: { type: DocType.Language } }),
     ]);
 
-    if (availableContentTranslations.length > 1) {
-        availableTranslations.value = availableContentTranslations as ContentDto[];
-        languages.value = (availableLanguages as LanguageDto[]).filter((lang) =>
-            availableTranslations.value.some((t) => t.language === lang._id),
-        );
-    }
+    availableTranslations.value = availableContentTranslations as ContentDto[];
+    languages.value = (availableLanguages as LanguageDto[]).filter((lang) =>
+        availableTranslations.value.some((t) => t.language === lang._id),
+    );
 
     isLoadingTranslations.value = false;
+    isLoading.value = false;
 
     if (isConnected.value) {
         // If online, do API call to get list of available languages and update dropdown
@@ -322,7 +321,7 @@ const categoryTags = computed(() => tags.value.filter((t) => t.parentTagType ==
 const selectedCategoryId = ref<Uuid | undefined>();
 
 // If connected, we are waiting for data to load from the API, unless found in IndexedDB
-const isLoading = ref(isConnected.value);
+const isLoading = ref(true);
 const is404 = ref(false);
 
 // Compiled Mango filter to check if content is published (recompiles reactively when content changes)
@@ -350,6 +349,7 @@ const check404 = () => {
 
 watch(content, () => {
     is404.value = check404();
+    if (is404.value) isLoading.value = false;
 });
 
 // Function to toggle bookmark for the current content
@@ -384,8 +384,6 @@ const isBookmarked = computed(() => {
 });
 
 watch([content, is404], () => {
-    if (content.value) isLoading.value = false;
-
     // Set document title and meta tags
     document.title = is404.value
         ? `Page not found - ${appName}`
@@ -627,7 +625,10 @@ watch([isLoading, content, is404], async () => {
 </script>
 
 <template>
-    <BasePage :showBackButton="true" desktopTopBar>
+    <BasePage
+        :showBackButton="true"
+        desktopTopBar
+    >
         <template
             #quickControls
             v-if="!is404"

From 3a76b6ad2d84902b6bf9983346ef6b5e1e387f57 Mon Sep 17 00:00:00 2001
From: Christian Touoyim <touoyim14christian@gmail.com>
Date: Wed, 17 Jun 2026 15:01:16 +0200
Subject: [PATCH 2/5] fix failing tests

---
 app/src/pages/SingleContent/SingleContent.vue | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 18d38f0e3c..f12c9971ea 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -100,6 +100,34 @@ const defaultContent: ContentDto = {
 
 const content = ref<ContentDto | undefined>(defaultContent);
 
+// If connected, we are waiting for data to load from the API, unless found in IndexedDB
+const isLoading = ref(true);
+const is404 = ref(false);
+
+// Compiled Mango filter to check if content is published (recompiles reactively when content changes)
+const isPublishedFilter = computed(() => {
+    if (!content.value?.language) return () => false;
+    return mangoCompile({
+        $and: [
+            { status: PublishStatus.Published },
+            ...mangoIsPublished([content.value.language], { includeScheduled: false }),
+        ],
+    });
+});
+
+const check404 = () => {
+    if (isLoading.value && (content.value === undefined || content.value === defaultContent))
+        return false; // Don't show 404 during loading
+
+    // If content is undefined (not found), show 404
+    if (!content.value) return true;
+
+    // If content is still the default loading content, don't show 404 yet
+    if (content.value === defaultContent) return false;
+
+    return !isPublishedFilter.value(content.value);
+};
+
 const liveUrl = () => {
     if (!content.value || !selectedLanguageCode.value) return "";
 
@@ -222,7 +250,11 @@ const currentParentId = ref<string>("");
 const isLoadingTranslations = ref(false);
 
 watch([content, isConnected], async () => {
-    if (!content.value || content.value === defaultContent) return;
+    if (content.value === undefined) {
+        isLoading.value = false;
+        return;
+    }
+    if (content.value === defaultContent) return;
 
     // Only reload translations if we're viewing a different parent content
     // This prevents flash when switching between translations of the same content
@@ -320,36 +352,8 @@ const tags = useDexieLiveQueryWithDeps(
 const categoryTags = computed(() => tags.value.filter((t) => t.parentTagType == TagType.Category));
 const selectedCategoryId = ref<Uuid | undefined>();
 
-// If connected, we are waiting for data to load from the API, unless found in IndexedDB
-const isLoading = ref(true);
-const is404 = ref(false);
-
-// Compiled Mango filter to check if content is published (recompiles reactively when content changes)
-const isPublishedFilter = computed(() => {
-    if (!content.value?.language) return () => false;
-    return mangoCompile({
-        $and: [
-            { status: PublishStatus.Published },
-            ...mangoIsPublished([content.value.language], { includeScheduled: false }),
-        ],
-    });
-});
-
-const check404 = () => {
-    if (isLoading.value) return false; // Don't show 404 during loading
-
-    // If content is undefined (not found), show 404
-    if (!content.value) return true;
-
-    // If content is still the default loading content, don't show 404 yet
-    if (content.value === defaultContent) return false;
-
-    return !isPublishedFilter.value(content.value);
-};
-
-watch(content, () => {
+watch([content, isLoading], () => {
     is404.value = check404();
-    if (is404.value) isLoading.value = false;
 });
 
 // Function to toggle bookmark for the current content

From 2594ab330066f35e4af10da96021fbcdf56a9688 Mon Sep 17 00:00:00 2001
From: Christian Touoyim <touoyim14christian@gmail.com>
Date: Wed, 17 Jun 2026 16:19:08 +0200
Subject: [PATCH 3/5] revert changes

---
 app/src/pages/SingleContent/SingleContent.vue | 76 +++++++++----------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index f12c9971ea..2c6a5b7aeb 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -100,34 +100,6 @@ const defaultContent: ContentDto = {
 
 const content = ref<ContentDto | undefined>(defaultContent);
 
-// If connected, we are waiting for data to load from the API, unless found in IndexedDB
-const isLoading = ref(true);
-const is404 = ref(false);
-
-// Compiled Mango filter to check if content is published (recompiles reactively when content changes)
-const isPublishedFilter = computed(() => {
-    if (!content.value?.language) return () => false;
-    return mangoCompile({
-        $and: [
-            { status: PublishStatus.Published },
-            ...mangoIsPublished([content.value.language], { includeScheduled: false }),
-        ],
-    });
-});
-
-const check404 = () => {
-    if (isLoading.value && (content.value === undefined || content.value === defaultContent))
-        return false; // Don't show 404 during loading
-
-    // If content is undefined (not found), show 404
-    if (!content.value) return true;
-
-    // If content is still the default loading content, don't show 404 yet
-    if (content.value === defaultContent) return false;
-
-    return !isPublishedFilter.value(content.value);
-};
-
 const liveUrl = () => {
     if (!content.value || !selectedLanguageCode.value) return "";
 
@@ -250,11 +222,7 @@ const currentParentId = ref<string>("");
 const isLoadingTranslations = ref(false);
 
 watch([content, isConnected], async () => {
-    if (content.value === undefined) {
-        isLoading.value = false;
-        return;
-    }
-    if (content.value === defaultContent) return;
+    if (!content.value) return;
 
     // Only reload translations if we're viewing a different parent content
     // This prevents flash when switching between translations of the same content
@@ -287,13 +255,14 @@ watch([content, isConnected], async () => {
         mangoToDexie(db.docs, { selector: { type: DocType.Language } }),
     ]);
 
-    availableTranslations.value = availableContentTranslations as ContentDto[];
-    languages.value = (availableLanguages as LanguageDto[]).filter((lang) =>
-        availableTranslations.value.some((t) => t.language === lang._id),
-    );
+    if (availableContentTranslations.length > 1) {
+        availableTranslations.value = availableContentTranslations as ContentDto[];
+        languages.value = (availableLanguages as LanguageDto[]).filter((lang) =>
+            availableTranslations.value.some((t) => t.language === lang._id),
+        );
+    }
 
     isLoadingTranslations.value = false;
-    isLoading.value = false;
 
     if (isConnected.value) {
         // If online, do API call to get list of available languages and update dropdown
@@ -352,7 +321,34 @@ const tags = useDexieLiveQueryWithDeps(
 const categoryTags = computed(() => tags.value.filter((t) => t.parentTagType == TagType.Category));
 const selectedCategoryId = ref<Uuid | undefined>();
 
-watch([content, isLoading], () => {
+// If connected, we are waiting for data to load from the API, unless found in IndexedDB
+const isLoading = ref(isConnected.value);
+const is404 = ref(false);
+
+// Compiled Mango filter to check if content is published (recompiles reactively when content changes)
+const isPublishedFilter = computed(() => {
+    if (!content.value?.language) return () => false;
+    return mangoCompile({
+        $and: [
+            { status: PublishStatus.Published },
+            ...mangoIsPublished([content.value.language], { includeScheduled: false }),
+        ],
+    });
+});
+
+const check404 = () => {
+    if (isLoading.value) return false; // Don't show 404 during loading
+
+    // If content is undefined (not found), show 404
+    if (!content.value) return true;
+
+    // If content is still the default loading content, don't show 404 yet
+    if (content.value === defaultContent) return false;
+
+    return !isPublishedFilter.value(content.value);
+};
+
+watch(content, () => {
     is404.value = check404();
 });
 
@@ -388,6 +384,8 @@ const isBookmarked = computed(() => {
 });
 
 watch([content, is404], () => {
+    if (content.value) isLoading.value = false;
+
     // Set document title and meta tags
     document.title = is404.value
         ? `Page not found - ${appName}`

From d5833b28ecf11c8d5ae1252e35c0a655a87dfb0f Mon Sep 17 00:00:00 2001
From: Christian Touoyim <touoyim14christian@gmail.com>
Date: Thu, 18 Jun 2026 08:50:48 +0200
Subject: [PATCH 4/5] improves the sequencing in singleContent the prevent the
 the flashing while loading the languages and the the flakey tests

---
 app/src/pages/SingleContent/SingleContent.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 2c6a5b7aeb..4516dc02f3 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -20,7 +20,7 @@ import {
     verifyAccess,
     AclPermission,
 } from "luminary-shared";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch, onBeforeMount } from "vue";
 import { BookmarkIcon as BookmarkIconSolid, TagIcon, SunIcon } from "@heroicons/vue/24/solid";
 import {
     BookmarkIcon as BookmarkIconOutline,
@@ -221,8 +221,8 @@ const unwatch = watch([idbContent, isConnected], () => {
 const currentParentId = ref<string>("");
 const isLoadingTranslations = ref(false);
 
-watch([content, isConnected], async () => {
-    if (!content.value) return;
+const loadLocalTranlations = async () => {
+    if (!content.value || content.value === defaultContent) return;
 
     // Only reload translations if we're viewing a different parent content
     // This prevents flash when switching between translations of the same content
@@ -263,6 +263,16 @@ watch([content, isConnected], async () => {
     }
 
     isLoadingTranslations.value = false;
+};
+
+onBeforeMount(() => {
+    loadLocalTranlations();
+});
+
+watch([content, isConnected], async () => {
+    if (!content.value) return;
+
+    await loadLocalTranlations();
 
     if (isConnected.value) {
         // If online, do API call to get list of available languages and update dropdown

From 71fdbf2db9e933b32643f45cc1060ae25882130a Mon Sep 17 00:00:00 2001
From: Christian Touoyim <touoyim14christian@gmail.com>
Date: Thu, 18 Jun 2026 10:36:05 +0200
Subject: [PATCH 5/5] fixes typing error

---
 app/src/pages/SingleContent/SingleContent.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 4516dc02f3..38800a91ab 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -221,7 +221,7 @@ const unwatch = watch([idbContent, isConnected], () => {
 const currentParentId = ref<string>("");
 const isLoadingTranslations = ref(false);
 
-const loadLocalTranlations = async () => {
+const loadLocalTranslations = async () => {
     if (!content.value || content.value === defaultContent) return;
 
     // Only reload translations if we're viewing a different parent content
@@ -266,13 +266,13 @@ const loadLocalTranlations = async () => {
 };
 
 onBeforeMount(() => {
-    loadLocalTranlations();
+    loadLocalTranslations();
 });
 
 watch([content, isConnected], async () => {
     if (!content.value) return;
 
-    await loadLocalTranlations();
+    await loadLocalTranslations();
 
     if (isConnected.value) {
         // If online, do API call to get list of available languages and update dropdown