Any ideas to make theme load like SPA?

[taurusxin]

I want the theme to load without refreshing. I tried Turbo and combined it with CSS animations, which worked well, but there were some flickering issues. Does anyone have better solutions? Below is my code (placed in layouts/partial/head/custom.html)

<script type="module">
  import * as Turbo from "https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm"
</script>

<style>
  /* Turbo gradient transition — Fallback solution: handwritten CSS transition */
  body.turbo-fade-out {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }
  body {
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
  }

/* Turbo Gradient Transitions — Modern Browser Solution: View Transitions API */
  ::view-transition-old(root) {
    animation: turbo-fade-out 0.2s ease-in-out;
  }
  ::view-transition-new(root) {
    animation: turbo-fade-in 0.2s ease-in-out;
  }
  @keyframes turbo-fade-out {
    to { opacity: 0; }
  }
  @keyframes turbo-fade-in {
    from { opacity: 0; }
  }
</style>

<script>
  document.addEventListener('turbo:before-render', (event) => {
    if (document.startViewTransition) {
      /* Modern browsers: Use the View Transitions API for a smoother experience */
      event.preventDefault();
      document.startViewTransition(() => {
        event.detail.resume();
      });
    }
  });

document.addEventListener('turbo:render', () => {
    /* The new content has been replaced by the DOM, and the class is removed to trigger fade-in */
    requestAnimationFrame(() => {
      document.body.classList.remove('turbo-fade-out');
    });
  });
</script>