[772] fix: prevent content flash when using case studies filtering

website/modules/asset/ui/src/scss/_base.scss

@@ -177,3 +177,14 @@
 .breadcrumb-link:hover {
   text-decoration: underline;
 }
+
+.loading {
+  opacity: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.loaded {
+  opacity: 1;
+  overflow: visible;
+  visibility: visible;
+}

website/modules/asset/ui/src/scss/_cases.scss

@@ -7,7 +7,6 @@
   &_content {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
     margin-bottom: 3rem;
   }
 

website/modules/case-studies-page/views/index.html

@@ -6,7 +6,13 @@
   data-default-visible-tags="{{ data.defaultVisibleTagsCount }}"
 >
   <div class="cs_content">
-    <div class="page-main_content">{% area data.page, 'main' %}</div>
+    <div
+      class="page-main_content loading"
+      id="page-main_content"
+      aria-busy="true"
+    >
+      {% area data.page, 'main' %}
+    </div>
 
     <div id="filter" class="filter-anchor"></div>
 
@@ -295,6 +301,26 @@ <h4 class="portfolio-title">{{ article.portfolioTitle }}</h4>
 <script>
   window.totalPages = {{ data.totalPages | json }};
 </script>
+<script>
+  const container = document.getElementById('page-main_content');
+
+  if (container) {
+    window.addEventListener('DOMContentLoaded', () => {
+      container.classList.remove('loading');
+      container.classList.add('loaded');
+      container.setAttribute('aria-busy', 'false');
+    });
+  }
+</script>
+<noscript>
+  <style>
+    #page-main_content {
+      opacity: 1 !important;
+      overflow: visible !important;
+      visibility: visible !important;
+    }
+  </style>
+</noscript>
 <script src="/js/modules/case-studies-page/infinite-scroll.js"></script>
 
 {% endblock main %}

website/views/fragments/fragments.html

@@ -31,37 +31,52 @@
 <footer class="sf-footer sf-container">
   <div class="sf-footer__content">
     <div class="sf-footer__top">
-      <p class="sf-footer__tagline">A Deliberately Developmental Organization.</p>
+      <p class="sf-footer__tagline">
+        A Deliberately Developmental Organization.
+      </p>
       <p class="sf-footer__tagline">Built by real people, for real impact.</p>
-      <p class="sf-footer__tagline">Let's grow something meaningful together.</p>
+      <p class="sf-footer__tagline">
+        Let's grow something meaningful together.
+      </p>
     </div>
-    
+
     <div class="sf-footer__links">
       <div class="sf-footer__links-group">
-        <a href="https://www.linkedin.com/company/speed-and-function/" 
-           class="sf-footer__links-item" 
-           target="_blank" 
-           rel="noopener noreferrer">
+        <a
+          href="https://www.linkedin.com/company/speed-and-function/"
+          class="sf-footer__links-item"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           linkedin
         </a>
-        <a href="mailto:connect@speedandfunction.com" 
-           class="sf-footer__links-item">
+        <a
+          href="mailto:connect@speedandfunction.com"
+          class="sf-footer__links-item"
+        >
           connect@speedandfunction.com
         </a>
       </div>
-      <a href="/privacy-policy" class="sf-footer__links-item sf-footer__links-item--policy">
+      <a
+        href="/privacy-policy"
+        class="sf-footer__links-item sf-footer__links-item--policy"
+      >
         privacy policy
       </a>
     </div>
-    
+
     <div class="sf-footer__bottom">
       <p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&amp;F</p>
     </div>
   </div>
 </footer>
 {% endfragment %} {% fragment breadcrumbs() %} {% if data.page._url !=
 data.home._url %}
-<nav class="breadcrumb" aria-label="Breadcrumb navigation">
+<nav
+  class="breadcrumb loading"
+  aria-label="Breadcrumb navigation"
+  aria-busy="true"
+>
   <ol class="breadcrumb-list">
     {% for page in data.page._ancestors %}
     <li class="breadcrumb-item">

website/views/layout.html

@@ -1,24 +1,20 @@
-{# Automatically extends the right outer layout and also handles AJAX situations #}
-{% extends data.outerLayout %}
-{% import 'fragments/fragments.html' as fragments %}
-
-{% set title = data.piece.title or data.page.title %}
-
-{% block title %}
-  {{ title }}
-  {% if not title %}
-    {{ apos.log('Looks like you forgot to override the title block in a template that does not have access to an Apostrophe page or piece.') }}
-  {% endif %}
-{% endblock %}
-
-{# ✅ Add favicon in the <head> section #}
-{% block extraHead %}
-  <link rel="icon" href="{{ apos.asset.url('/modules/asset/favicon/favicon.ico') }}" type="image/x-icon">
-  {% component '@apostrophecms/seo:tagManagerHead' with data %}
-{% endblock %}
-
-{% block beforeMain %}
-  {% component '@apostrophecms/seo:tagManagerBody' with data %}
+{# Automatically extends the right outer layout and also handles AJAX situations
+#} {% extends data.outerLayout %} {% import 'fragments/fragments.html' as
+fragments %} {% set title = data.piece.title or data.page.title %} {% block
+title %} {{ title }} {% if not title %} {{ apos.log('Looks like you forgot to
+override the title block in a template that does not have access to an
+Apostrophe page or piece.') }} {% endif %} {% endblock %} {# ✅ Add favicon in
+the
+<head>
+  section #} {% block extraHead %}
+  <link
+    rel="icon"
+    href="{{ apos.asset.url('/modules/asset/favicon/favicon.ico') }}"
+    type="image/x-icon"
+  />
+  {% component '@apostrophecms/seo:tagManagerHead' with data %} {% endblock %}
+  {% block beforeMain %} {% component '@apostrophecms/seo:tagManagerBody' with
+  data %}
   <a class="sr-only" href="#main">Skip to content</a>
   <div
     class="bp-wrapper relative"
@@ -30,23 +26,48 @@
       class="bp-main"
       role="main"
       id="main"
-      {% if not data.user %}
-        data-barba="container"
-      {% endif %}
+      {%
+      if
+      not
+      data.user
+      %}
+      data-barba="container"
+      {%
+      endif
+      %}
     >
       {% render fragments.breadcrumbs() %}
-      <div class="sf-container">
-{% endblock %}
-
-{% block main %}
-  {# Usually, your page templates in the @apostrophecms/pages module will override this block. It is safe to assume this is where your page-specific content should go. #}
-{% endblock %}
-
-{% block afterMain %}
+      <div class="sf-container loading" aria-busy="true">
+        {% endblock %} {% block main %} {# Usually, your page templates in the
+        @apostrophecms/pages module will override this block. It is safe to
+        assume this is where your page-specific content should go. #} {%
+        endblock %} {% block afterMain %}
       </div>
     </main>
     {% render fragments.footer() %}
-    <script type="text/javascript"></script>
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function () {
+        document
+          .querySelectorAll('.breadcrumb.hidden, .sf-container.hidden')
+          .forEach(function (el) {
+            el.classList.remove('hidden');
+            el.classList.add('visible');
+            if (el.hasAttribute('aria-busy')) {
+              el.setAttribute('aria-busy', 'false');
+            }
+          });
+      });
+    </script>
+    <noscript>
+      <style>
+        .breadcrumb.hidden,
+        .sf-container.hidden {
+          opacity: 1 !important;
+          overflow: visible !important;
+          visibility: visible !important;
+        }
+      </style>
+    </noscript>
   </div>
-{# Close .bp-wrapper #}
-{% endblock %}
+  {# Close .bp-wrapper #} {% endblock %}
+</head>