feat(nimbus): Loading spinner on home page when it sorts/filter data (#14251)

Because

- If we have more data and if filter or sort the deliveries, it takes
time to get the results back based on user action on home page

This commit

- Adds the loading spinner on home page when it is getting the request
process on filtering and sorting

Fixes #14028

---------

Co-authored-by: Beth Rennie <[email protected]>

Author: yashikakhurana

experimenter/experimenter/nimbus_ui/static/js/experiment_home.js

@@ -0,0 +1,11 @@
+document.body.addEventListener("htmx:beforeRequest", function () {
+  document.querySelectorAll(".htmx-spinner").forEach((spinner) => {
+    spinner.style.opacity = "1";
+  });
+});
+
+document.body.addEventListener("htmx:afterRequest", function () {
+  document.querySelectorAll(".htmx-spinner").forEach((spinner) => {
+    spinner.style.opacity = "0";
+  });
+});

experimenter/experimenter/nimbus_ui/static/webpack.config.js

@@ -5,6 +5,7 @@ const nodeModulesPath = path.resolve(__dirname, "../../../node_modules");
 module.exports = {
   entry: {
     app: "./js/index.js",
+    experiment_home: "./js/experiment_home.js",
     experiment_list: "./js/experiment_list.js",
     review_controls: "./js/review_controls.js",
     edit_audience: "./js/edit_audience.js",

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/home.html

@@ -60,7 +60,10 @@ <h5 class="fw-semibold">
               data-bs-delay={"hide":2000}>
             </i>
           </h5>
-          <div class="d-flex gap-2 ms-auto">
+          <div class="d-flex gap-2 ms-auto align-items-center">
+            <div class="htmx-spinner" style="opacity: 0; pointer-events: none">
+              <i class="fa-solid fa-spinner fa-spin fa-lg text-primary"></i>
+            </div>
             <a href="{% url 'nimbus-ui-home' %}{% if request.GET.sort %}?sort={{ request.GET.sort }}{% endif %}"
                class="btn btn-outline-primary btn-sm"
                hx-get="{% url 'nimbus-ui-home' %}{% if request.GET.sort %}?sort={{ request.GET.sort }}{% endif %}"
@@ -271,3 +274,8 @@ <h5 class="fw-semibold">
     </div>
   </div>
 {% endblock %}
+
+{% block extrascripts %}
+  {{ block.super }}
+  <script src="{% static 'nimbus_ui/experiment_home.bundle.js' %}"></script>
+{% endblock %}

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/home_experiments_layout.html

@@ -11,7 +11,12 @@ <h5 class="fw-semibold mb-0">
          data-bs-placement="top"
          data-bs-title="{{ tooltip }}"></i>
     </h5>
-    <span class="badge rounded-pill bg-primary fs-6 px-3 py-1">{{ page_obj.paginator.count }}</span>
+    <div class="d-flex align-items-center gap-2">
+      <div class="htmx-spinner" style="opacity: 0; pointer-events: none">
+        <i class="fa-solid fa-spinner fa-spin fa-lg text-primary"></i>
+      </div>
+      <span class="badge rounded-pill bg-primary fs-6 px-3 py-1">{{ page_obj.paginator.count }}</span>
+    </div>
   </div>
   {% if experiments %}
     <ul id="home-section-experiments"