Issue #3390508: Prevent Flash of Unstyled Content in SPA Mode

js/spa.js

@@ -6,6 +6,20 @@ document.addEventListener("DOMContentLoaded", (event) => {
         body.classList.add('view-transition-fallback');
     }
 
+    document.body.addEventListener('htmx:removingHeadElement', function(event) {
+      /**
+       * Retain styles during client side routing to help prevent flash of unstyled content.
+       */
+      const tagName = event.detail.headElement.tagName;
+      const rel = event.detail.headElement.getAttribute('rel');
+      if (tagName === 'LINK' && rel === 'stylesheet') {
+        event.preventDefault();
+      }
+      else if (event.detail.headElement.tagName === 'STYLE') {
+        event.preventDefault();
+      }
+    });
+
     // Work around https://github.com/bigskysoftware/htmx/issues/1384 to ensure the
     // correct attributes (especially classes) are applied during a routing event.
     document.body.addEventListener('htmx:afterSwap', function(evt) {
@@ -27,4 +41,4 @@ document.addEventListener("DOMContentLoaded", (event) => {
             evt.detail.target.classList.add('view-transition-fallback-settled');
         }
     });
-});
+}, {once : true});

view_transitions.info.yml

 name: "View Transitions"
 type: module
 description: "Enable cross-page transitions using the view transitions API."
-package: Custom
+package: Other
 core_version_requirement: ^8.8 || ^9 || ^10

view_transitions.libraries.yml

@@ -18,5 +18,4 @@ spa:
 htmx:
   js:
     https://unpkg.com/htmx.org@1.9.5: { type: external, minified: true }
-    https://unpkg.com/htmx.org/dist/ext/head-support.js:
-      { type: external, minified: true }
+    https://unpkg.com/htmx.org/dist/ext/head-support.js: { type: external, minified: true }

view_transitions.links.menu.yml

 view_transitions.settings:
   title: View Transitions Settings
   description: Configure view transition behavior
-  parent: system.admin_config_system
+  parent: system.admin_config_ui
   route_name: view_transitions.settings
   weight: 10

view_transitions.module

@@ -39,7 +39,7 @@ function view_transitions_preprocess_html(&$variables) {
       $variables['#attached']['library'][] =  'view_transitions/spa';
       $variables['attributes']['hx-boost'] = 'true';
       $variables['attributes']['hx-ext'] = 'head-support';
-      $variables['attributes']['hx-swap'] = 'outerHTML transition:true';
+      $variables['attributes']['hx-swap'] = 'outerHTML transition:true settle:200ms';
       if ($animation_type !== 'default') {
         $variables['html_attributes']->addClass('custom-transition');
         $variables['html_attributes']->addClass($animation_type);

view_transitions.routing.yml

 view_transitions.settings:
-  path: "/admin/config/system/view-transitions"
+  path: "/admin/config/user-interface/view-transitions"
   defaults:
     _title: "View Transitions Settings"
     _form: 'Drupal\view_transitions\Form\SettingsForm'