fix: improve resize handling

_includes/js/switch-view-js.html

@@ -1,26 +1,40 @@
 <script>
+  const switchView = document.getElementById('switch-view');
+  const buttons = Array.from(switchView ? switchView.children : []);
+
   function toggleButtonView() {
-    const switchView = document.getElementById('switch-view');
+    if (!switchView) return;
 
     switchView.classList.add('btn-group-vertical');
     switchView.classList.remove('btn-group');
 
-    // Show all buttons except the last one (toggle)
-    Array.from(switchView.children).forEach((button, index) => {
-      button.style.display = 'block';
-
-      if (index === switchView.children.length - 1) {
-        button.style.display = 'none';
-      }
+    // Hide last button (toggle) from vertical display
+    buttons.forEach((button, index) => {
+      button.style.display = index === buttons.length - 1 ? 'none' : 'block';
     });
   }
 
-  window.addEventListener('resize', () => {
-    if (window.innerWidth > 576) {
-      const switchView = document.getElementById('switch-view');
+  // Resizing with debounce
+  const debounce = (fn, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  };
+
+  const handleResize = () => {
+    if (!switchView) return;
 
+    if (window.innerWidth > 576) {
       switchView.classList.add('btn-group', 'btn-group-toggle', 'd-flex');
       switchView.classList.remove('btn-group-vertical');
+
+      buttons.forEach((button) => (button.style.display = ''));
+    } else {
+      buttons.forEach((button) => (button.style.display = ''));
     }
-  });
+  };
+
+  window.addEventListener('resize', debounce(handleResize, 250));
 </script>

_layouts/browse.html

@@ -3,8 +3,6 @@
 layout: page
 custom-foot: js/browse-js.html
 ---
-{% include js/switch-view-js.html %}
-
 {{ content }}
 
 <div class="container-fluid px-0">
@@ -86,6 +84,8 @@
     </div>
   </div>
 
+  {% include js/switch-view-js.html %}
+
   <div class="h2 mt-2 text-center" id="numberOf"></div>
 
   <div id="loadingIcon" class="text-center">

_layouts/cloud.html

@@ -4,8 +4,6 @@
 # can be used for any metadata field cloud
 layout: page
 ---
-{% include js/switch-view-js.html %}
-
 {{ content }}
 
 <div class="container-fluid px-0">
@@ -58,6 +56,8 @@
   </div>
 </div>
 
+{% include js/switch-view-js.html %}
+
 {%- comment -%}
   Figure out default "Subjects" and "Locations" page cloud values as configured in in "theme.yml",
   and set default values for cloud include.

_layouts/list.html

@@ -4,8 +4,6 @@
 # can be used for any metadata field
 layout: page
 ---
-{% include js/switch-view-js.html %}
-
 {{ content }}
 
 {%- comment -%}
@@ -102,6 +100,8 @@
   </div>
 </div>
 
+{% include js/switch-view-js.html %}
+
 {% assign list_id = 'list-div-' | append: fields | slugify %}
 <div id="{{ list_id }}" class="text-center bg-{{ page.background | default: 'light' }} border rounded p-1"></div>
 {% include js/list-js.html id=list_id fields=fields min=min stopwords=stopwords %}

_layouts/timeline_edtf.html

@@ -25,8 +25,6 @@
   {%- assign navYears = navYears | split: ';' -%}
 {%- endif -%}
 
-{% include js/switch-view-js.html %}
-
 {{ content }}
 
 <div class="container-fluid px-0">
@@ -77,6 +75,8 @@
       </div>
     </div>
 
+    {% include js/switch-view-js.html %}
+
     {%- if navYears -%}
       <div class="col-12 col-md-auto text-center mb-2 mb-lg-0 ms-md-auto">
         <div class="dropdown">