[Waste] Remove use of loading wrapper.

As the async code can kick in at any point property is loaded, you had to make sure any subsequent results page had the async loading wrapper div, otherwise you ended up with a blank page. Replace the use of HTMX with a smaller script that replaces the content, which we know will be present, and don't output header/footers that are to be ignored.
mysociety · Sep 23, 2024 · a67d088 · a67d088
1 parent eff944d
commit a67d088
Show file tree

Hide file tree

Showing 22 changed files with 132 additions and 109 deletions.
diff --git a/perllib/FixMyStreet/App/Controller/Waste.pm b/perllib/FixMyStreet/App/Controller/Waste.pm
@@ -593,10 +593,8 @@ sub property : Chained('/') : PathPart('waste') : CaptureArgs(1) {
     # clear this every time they visit this page to stop stale content,
     # unless this load has happened whilst waiting for async Echo/Bartec API
     # calls to complete.
-    # HTMX used for partial refreshes, sends a hx-request header
-    my $loading = ($c->req->{headers}->{'hx-request'} || "") eq "true";
     # non-JS page loads include a page_loading=1 request param
-    $loading ||= $c->get_param('page_loading');
+    my $loading = $c->stash->{ajax_loading} = $c->req->{headers}->{'x-requested-with'} || $c->get_param('page_loading');
 
     if ( $c->req->path =~ m#^waste/[:\w %]+$#i && !$loading) {
         $c->cobrand->call_hook( clear_cached_lookups_property => $id );

diff --git a/t/app/controller/waste.t b/t/app/controller/waste.t
@@ -119,7 +119,6 @@ FixMyStreet::override_config {
         $mech->submit_form_ok({ with_fields => { postcode => 'BR1 1AA' } });
         $mech->content_contains('13345'); # For comparing against type check below
         $mech->submit_form_ok({ with_fields => { address => 'missing' } });
-        $mech->content_contains('waste__loading_wrapper');
         $mech->content_contains('find your address in our records');
     };
     subtest 'Address lookup' => sub {
@@ -143,7 +142,6 @@ FixMyStreet::override_config {
         $mech->content_lacks('service-535', 'Cannot report, last collection was 20th');
         $mech->content_lacks('service-542', 'Cannot report, last collection was 18th');
         $mech->follow_link_ok({ text => 'Report a missed collection' });
-        $mech->content_contains('waste__loading_wrapper');
         $mech->content_contains('service-531', 'Checkbox, last collection was 27th');
         $mech->content_lacks('service-537', 'No checkbox, last collection was 27th but the service unit has a report');
         $mech->content_lacks('service-535', 'No checkbox, last collection was 20th');

diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html
@@ -4,6 +4,11 @@
 <meta name="viewport" content="initial-scale=1.0, width=device-width, viewport-fit=cover">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 [% IF page_refresh %]
+    <script type="module" src="[% version('/cobrands/fixmystreet-uk-councils/refresh.js') %]"
+        id="page-refresh" data-every="[% page_refresh %]"></script>
+    <script nomodule>
+        setTimeout(function(){ location.reload() }, [% page_refresh %] * 1000);
+    </script>
     <noscript>
         <meta http-equiv="refresh" content="[% page_refresh %];url=?page_loading=1">
     </noscript>

diff --git a/templates/web/base/footer.html b/templates/web/base/footer.html
@@ -1,3 +1,4 @@
+[% RETURN IF ajax_loading ~%]
                     [% IF pagefooter %]
                     <footer role="contentinfo">
                         [% INCLUDE 'front/footer-marketing.html' %]

diff --git a/templates/web/base/header.html b/templates/web/base/header.html
@@ -1,4 +1,5 @@
 [%
+    RETURN IF ajax_loading;
     SET html_att = ' lang="' _ lang_code _ '"';
     # For a right-to-left language, use the following line in your own header:
     # SET html_att = html_att _ ' dir="rtl"';

diff --git a/templates/web/base/waste/async_loading.html b/templates/web/base/waste/async_loading.html
@@ -1,24 +1,16 @@
-[% USE date(format = c.cobrand.bin_day_format) %]
-[% USE pounds = format('%.2f'); ~%]
 [% PROCESS 'waste/header.html' %]
 
-<div class="waste__loading_wrapper"
-  hx-get="[% c.req.uri.path_query %]"
-  hx-swap="outerHTML"
-  hx-select=".waste__loading_wrapper"
-  hx-trigger="every [% page_refresh %]s">
-
-  [% IF c.cobrand.moniker != 'sutton' %]
+[% IF c.cobrand.moniker != 'sutton' %]
     <h1 class="govuk-heading-xl">Your bin days</h1>
-  [% END %]
+[% END %]
 
-    <div class="waste__collections">
-        <div class="govuk-grid-row">
-          <div class="govuk-grid-column-full text-centered">
-            <img id="loading-indicator" aria-hidden="true" src="/i/loading.svg" alt="Loading...">
-            <h2>Loading your bin days...</h2>
-          </div>
-        </div>
+<div class="waste__collections">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-full text-centered">
+        <img id="loading-indicator" aria-hidden="true" src="/i/loading.svg" alt="Loading...">
+        <h2>Loading your bin days...</h2>
+      </div>
     </div>
 </div>
+
 [% INCLUDE footer.html %]
diff --git a/templates/web/base/waste/bin_days.html b/templates/web/base/waste/bin_days.html
@@ -2,8 +2,6 @@
 [% USE pounds = format('%.2f'); ~%]
 [% PROCESS 'waste/header.html' %]
 
-<div class="waste__loading_wrapper">
-
 [% IF c.cobrand.moniker != 'sutton' %]
 <h1 class="govuk-heading-xl">Your bin days</h1>
 [% END %]
@@ -254,5 +252,5 @@ <h3 id="bulky-waste" class="govuk-heading-m">Bulky Waste</h3>
   </div>
  [% END %]
 </div>
-</div>
+
 [% INCLUDE footer.html %]
diff --git a/templates/web/base/waste/form.html b/templates/web/base/waste/form.html
@@ -1,22 +1,19 @@
 [% SET title = form.title ~%]
 [% PROCESS 'waste/header.html' %]
 
-<div class="waste__loading_wrapper">
-
-  [% PROCESS 'govuk/fields.html' %]
-  [% PROCESS back %]
-  [% PROCESS errors %]
-  [% PROCESS title %]
-  [% IF property %]
+[% PROCESS 'govuk/fields.html' %]
+[% PROCESS back %]
+[% PROCESS errors %]
+[% PROCESS title %]
+[% IF property %]
     [% INCLUDE 'waste/_address_display.html' %]
-  [% END %]
+[% END %]
 
-  [% IF form.intro_template %][% PROCESS "waste/${form.intro_template}" %][% END %]
+[% IF form.intro_template %][% PROCESS "waste/${form.intro_template}" %][% END %]
 
 <form class="waste waste--[% form.current_page.name OR form.name %]" method="post"
     [% IF form.current_page.name == 'location' %]enctype="multipart/form-data"[% END %]>
   [% PROCESS form %]
 </form>
 
-</div>
 [% INCLUDE footer.html %]
diff --git a/templates/web/base/waste/garden/property_page.html b/templates/web/base/waste/garden/property_page.html
@@ -1,7 +1,5 @@
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
   [% PROCESS 'govuk/fields.html' %]
   [% PROCESS title title=form.title %]
   [% PROCESS errors %]
@@ -20,6 +18,4 @@
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/base/waste/header.html b/templates/web/base/waste/header.html
@@ -1,21 +1,21 @@
 [%
-SET bodyclass = 'waste';
-IF c.cobrand.call_hook('bulky_enabled');
-  SET bodyclass = 'waste govuk bulky';
+IF NOT ajax_loading;
+    SET bodyclass = 'waste';
+    IF c.cobrand.call_hook('bulky_enabled');
+      SET bodyclass = 'waste govuk bulky';
+    END;
+    extra_js = [
+        version('/vendor/accessible-autocomplete.min.js'),
+        version('/js/waste.js')
+    ];
+    # Bexley want external links to open in new tab
+    SET external_new_tab = '';
+    IF c.cobrand.moniker == 'bexley';
+      SET external_new_tab = 'target="_blank"';
+    END;
+    INCLUDE header.html;
 END;
-%]
-[% extra_js = [
-    version('/vendor/accessible-autocomplete.min.js'),
-    version('/js/waste.js')
-] -%]
-[%
-# Bexley want external links to open in new tab
-SET external_new_tab = '';
-IF c.cobrand.moniker == 'bexley';
-  SET external_new_tab = 'target="_blank"';
-END;
-%]
-[% INCLUDE header.html %]
+~%]
 
 [% site_message = c.cobrand.site_message('waste') %]
 [% IF site_message %]

diff --git a/templates/web/base/waste/missing.html b/templates/web/base/waste/missing.html
@@ -1,7 +1,5 @@
 [% PROCESS 'waste/header.html' %]
 
-<div class="waste__loading_wrapper">
-
 <h1 class="govuk-heading-xl">No address on record</h1>
 
 <p class="govuk-body-l">We can’t find your address in our records</p>
@@ -37,6 +35,4 @@ <h2 class="govuk-heading-m">What you can do now</h2>
   [% END %]
 </ul>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/brent/waste/garden/subscribe_intro.html b/templates/web/brent/waste/garden/subscribe_intro.html
@@ -1,7 +1,5 @@
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
   [% PROCESS 'govuk/fields.html' %]
   [% PROCESS title title=form.title %]
   [% PROCESS errors %]
@@ -74,6 +72,4 @@ <h3>
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html
@@ -1,3 +1,4 @@
+[% RETURN IF ajax_loading ~%]
                 </div><!-- .content role=main -->
             </div><!-- .container -->
         </div><!-- .table-cell -->

diff --git a/templates/web/bromley/waste/garden/subscribe_intro.html b/templates/web/bromley/waste/garden/subscribe_intro.html
@@ -1,7 +1,5 @@
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
   [% PROCESS 'govuk/fields.html' %]
   [% PROCESS title title=form.title %]
   [% PROCESS errors %]
@@ -65,6 +63,4 @@ <h3>
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/fixmystreet-uk-councils/about/waste-calendar.html b/templates/web/fixmystreet-uk-councils/about/waste-calendar.html
@@ -3,8 +3,6 @@
 SET ics_link = c.uri_for_action('waste/calendar_ics', [ property.id ]);
 %]
 
-<div class="waste__loading_wrapper">
-
 <script type="module" src="[% version('/vendor/clipboard-copy-element.js') %]"></script>
 <script type="module" src="[% version('/cobrands/fixmystreet-uk-councils/calendar.js') %]"></script>
 <style>
@@ -41,6 +39,4 @@ <h2>Step 2: subscribe to the calendar</h2>
 <li><a href="https://support.office.com/en-us/article/import-or-subscribe-to-a-calendar-in-outlook-com-cff1429c-5af6-41ec-a5b4-74f2c278e98c">Outlook</a></li>
 </ul>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/fixmystreet-uk-councils/footer_extra_js_base.html b/templates/web/fixmystreet-uk-councils/footer_extra_js_base.html
@@ -43,9 +43,4 @@
         version('/vendor/OpenLayers.Projection.OrdnanceSurvey.js'),
     );
 END;
-IF page_refresh;
-    scripts.push(
-        version('/vendor/htmx.min.js'),
-    );
-END;
 ~%]
diff --git a/templates/web/kingston/waste/garden/subscribe_intro.html b/templates/web/kingston/waste/garden/subscribe_intro.html
@@ -1,11 +1,9 @@
 [% USE date %]
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
-  [% PROCESS 'govuk/fields.html' %]
-  [% PROCESS title title=form.title %]
-  [% PROCESS errors %]
+[% PROCESS 'govuk/fields.html' %]
+[% PROCESS title title=form.title %]
+[% PROCESS errors %]
 
 <p>
 You can subscribe to our garden waste collection service if you are a frequent gardener, or if you can’t home compost your own garden waste.
@@ -85,6 +83,4 @@ <h2>How often we collect your garden waste</h2>
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/merton/waste/garden/subscribe_intro.html b/templates/web/merton/waste/garden/subscribe_intro.html
@@ -1,11 +1,9 @@
 [% USE date %]
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
-  [% PROCESS 'govuk/fields.html' %]
-  [% PROCESS title title=form.title %]
-  [% PROCESS errors %]
+[% PROCESS 'govuk/fields.html' %]
+[% PROCESS title title=form.title %]
+[% PROCESS errors %]
 
 <p>We offer a chargeable collection service for garden waste.</p>
 
@@ -22,6 +20,4 @@ <h2>Subscribe online</h2>
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]
diff --git a/templates/web/peterborough/waste/header.html b/templates/web/peterborough/waste/header.html
@@ -1,16 +1,18 @@
 [%
-IF c.cobrand.call_hook('bulky_enabled');
-  SET bodyclass = 'waste govuk bulky';
-ELSE;
-  SET bodyclass = 'waste govuk';
+IF NOT ajax_loading;
+    IF c.cobrand.call_hook('bulky_enabled');
+      SET bodyclass = 'waste govuk bulky';
+    ELSE;
+      SET bodyclass = 'waste govuk';
+    END;
+    extra_js = [
+        version('/vendor/accessible-autocomplete.min.js'),
+        version('/js/waste.js'),
+        version('/cobrands/peterborough/waste.js')
+    ];
+    INCLUDE header.html;
 END;
-%]
-[% extra_js = [
-    version('/vendor/accessible-autocomplete.min.js'),
-    version('/js/waste.js'),
-    version('/cobrands/peterborough/waste.js')
-] ~%]
-[% INCLUDE header.html %]
+~%]
 
 [% site_message = c.cobrand.site_message('waste') %]
 [% IF site_message %]

diff --git a/templates/web/sutton/waste/garden/subscribe_intro.html b/templates/web/sutton/waste/garden/subscribe_intro.html
@@ -1,11 +1,9 @@
 [% USE date %]
 [% INCLUDE waste/header.html %]
 
-<div class="waste__loading_wrapper">
-
-  [% PROCESS 'govuk/fields.html' %]
-  [% PROCESS title title=form.title %]
-  [% PROCESS errors %]
+[% PROCESS 'govuk/fields.html' %]
+[% PROCESS title title=form.title %]
+[% PROCESS errors %]
 
 <p>
 You can subscribe to our garden waste collection service if you are a frequent gardener, or if you can’t home compost your own garden waste.
@@ -85,6 +83,4 @@ <h2>How often we collect your garden waste</h2>
   [% PROCESS form %]
 </form>
 
-</div>
-
 [% INCLUDE footer.html %]