Adding animation to show loading of different period (#5698)

**Story card:**
[sc-16727](https://app.shortcut.com/simpledotorg/story/16727/dr-rai-loading-animations)

## Because

Dashboards load slowly, and show the user something is happening when
they navigate between different quarters on the action plans.


https://github.com/user-attachments/assets/240e2e4f-1b56-4c75-9e8c-52612a6b2968
_*All data shown is demo/dummy data, including facility names._

## This addresses

Showing a 'loading' message to inform users that the website is
responsive and something is happening.
Reduce the risk of confusion that the website is broken.

## Test instructions

- Branch `dr-rai-loading-animation-periods`
- Click the navigation options to move between quarters for the action
plans.
- Test it works for all of the 5 quarter buttons displayed

Co-authored-by: Igbanam <[email protected]>

Author: jamiecarter7

app/assets/stylesheets/dr_rai.scss

@@ -57,6 +57,13 @@ $font-condensed: "Roboto Condensed", sans-serif;
       text-underline-offset: 6px;
     }
   }
+
+  & .loading {
+    color: #6c737a;
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0 0 2px;
+  }
 }
 
 .add-action-button {

app/components/dashboard/dr_rai_report.html.erb

@@ -6,7 +6,8 @@
     <div class="actions-periods-navigation">
       <% periods.each do |period| %>
         <%= link_to human_readable(period), "#{request.path}?#{request.query_parameters.merge(selected_quarter: period.value.to_s).to_param}", class: classes_for_period(period) %>
-      <% end %>
+      <% end %>        
+      <p id="period-nav-loading" class="loading d-none"><i class="fa-solid fa-spinner-third fa-spin fa-fast-spin mr-8px"></i>Loading</p>
     </div>
   <% end %>
   <div class="actions-block<%= ' empty' unless action_plans.present? %>">
@@ -421,6 +422,11 @@
     $('.dropdown-item.delete').on("click", function(e) {
       $(this).closest('.action-card').find('.deleting-overlay').removeClass('d-none'); // show overlay only for this card
     });
+
+    // show loading on action plan period navigation
+    $('.period-button').on("click", function(e) {
+      $('#period-nav-loading').removeClass('d-none');
+    });
   });
 </script>