Make javascript packs defered

entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb

@@ -18,9 +18,10 @@ def scrolled_entry_json_seed_script_tag(scrolled_entry, options = {})
         scrolled_entry_json_seed(json, scrolled_entry, options)
       end
 
-      content_tag(:script, <<-JS.html_safe)
-        pageflowScrolledRender(#{sanitize_json(seed_json)});
-      JS
+      content_tag(:script,
+                  sanitize_json(seed_json).html_safe,
+                  type: 'application/json',
+                  data: {pageflow_scrolled_seed: true})
     end
 
     def scrolled_entry_json_seed(json, scrolled_entry, options = {})

entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb

@@ -4,7 +4,7 @@ module PacksHelper
     def scrolled_frontend_javascript_packs_tag(entry, options)
       javascript_pack_tag(
         *scrolled_frontend_packs(entry, **options),
-        defer: false
+        defer: true
       )
     end
 

entry_types/scrolled/package/src/frontend/index.js

@@ -191,6 +191,29 @@ global.pageflowScrolledRegisterUpdateSeedHandler = function() {
   }
 }
 
+function bootFromSeedElement() {
+  const element =
+    document.querySelector('script[type="application/json"][data-pageflow-scrolled-seed]');
+
+  if (element) {
+    global.pageflowScrolledRender(JSON.parse(element.textContent));
+  }
+}
+
+if (typeof document !== 'undefined') {
+  // Widget packs (defaultNavigation, consentBar, mainStorylineSheet, ...) are
+  // separate scripts that load after this entry bundle and register their widget
+  // types on execution. All deferred pack scripts run before DOMContentLoaded, so
+  // waiting for that event is what guarantees every widget type - and the seed
+  // element that follows the scripts - is present before we render.
+  if (document.readyState === 'complete') {
+    bootFromSeedElement();
+  }
+  else {
+    document.addEventListener('DOMContentLoaded', bootFromSeedElement);
+  }
+}
+
 function render(seed) {
   if (editMode) {
     ReactDOM.render(<Root seed={seed} />, document.getElementById('root'));

entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb

@@ -1604,14 +1604,17 @@ def render(helper, entry, options = {})
     end
 
     describe '#scrolled_entry_json_seed_script_tag' do
-      it 'renders script tag which assigns seed global variable' do
+      it 'renders inert JSON data script tag carrying the seed' do
         entry = create(:published_entry, type_name: 'scrolled')
         chapter = create(:scrolled_chapter, revision: entry.revision)
         create(:section, chapter:)
 
         result = helper.scrolled_entry_json_seed_script_tag(entry)
 
-        expect(result).to match(%r{<script>.*pageflowScrolledRender\(\{.*\}\).*</script>}m)
+        expect(result).to have_selector(
+          'script[type="application/json"][data-pageflow-scrolled-seed]',
+          visible: false
+        )
       end
 
       it 'escapes illegal characters' do