From 2533cf2639716128aa3ad475452dddbcb107705b Mon Sep 17 00:00:00 2001
From: mildfire <mildfire@gmail.com>
Date: Wed, 8 Jul 2026 19:53:37 +0500
Subject: [PATCH] perf: keep Slise banner mounted across navigation + gapless
 per-page refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #686 fixed cold-load, but the banner still went blank during client-side
page switches (measured on ping.pub: ~500ms median, up to ~2.5s on heavy
pages). Cause: <AdBanner> lived inside <RouterView><Transition>, so it was
destroyed/recreated on every navigation — Slise blanked the <ins> and only
repainted once the destination page had mounted, so the delay tracked page
weight.

Fix:
- Move <AdBanner> out of <RouterView> in DefaultLayout so it mounts once and
  persists across navigation (never unmounts -> never blanks).
- In AdBanner, watch route.fullPath and refresh gaplessly: drop data-ad-loaded
  (keeping the old creative on screen) then call adsbyslisesync(); Slise swaps
  the new creative in only when ready, so there is no blank gap.

Preserves a fresh creative/impression per page view.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/ad/AdBanner.vue           | 12 +++++++++++-
 src/layouts/components/DefaultLayout.vue |  6 ++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/ad/AdBanner.vue b/src/components/ad/AdBanner.vue
index 44431a4c75..a455860970 100644
--- a/src/components/ad/AdBanner.vue
+++ b/src/components/ad/AdBanner.vue
@@ -2,6 +2,7 @@
   <!-- Ad container with required attributes -->
   <div ref="containerRef" class="flex w-full justify-center overflow-hidden" :style="containerStyle">
     <ins
+      ref="insRef"
       class="adsbyslise"
       :style="adStyle"
       :data-ad-slot="slot"
@@ -12,7 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 declare global {
   interface Window {
@@ -47,7 +49,9 @@ const props = defineProps({
 });
 
 const containerRef = ref<HTMLElement | null>(null);
+const insRef = ref<HTMLElement | null>(null);
 const scale = ref(1);
+const route = useRoute();
 
 function toPixels(value: string) {
   const parsed = Number.parseFloat(value);
@@ -102,6 +106,12 @@ onMounted(() => {
   }
 });
 
+watch(() => route.fullPath, () => {
+  if (!insRef.value || typeof window.adsbyslisesync !== 'function') return;
+  insRef.value.removeAttribute('data-ad-loaded');
+  window.adsbyslisesync();
+});
+
 onBeforeUnmount(() => {
   observer?.disconnect();
 });
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index daef7258bf..d2505a53fe 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -320,12 +320,10 @@ const show_ad = computed(() => {
             >
           </div>
         </div>
+        <AdBanner v-if="show_ad" />
         <RouterView v-slot="{ Component }">
           <Transition mode="out-in">
-            <div>
-              <AdBanner v-if="show_ad" />
-              <Component :is="Component" />
-            </div>
+            <Component :is="Component" />
           </Transition>
         </RouterView>
       </div>