New functions: show and hide loading indicator

public/js/dropDownList.js

@@ -106,6 +106,7 @@ const filterArray = function (dataArr, filtersAsArray) {
  * @param {*} dataArr Input array
  * @param {*} filtersAsArray An array of strings tp be used as filters
  * @param {*} targetElement String corresponding to the ID of a drop down HTML element
+ * @returns {undefined}
  */
 const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
   const filteredArr = filterArray(dataArr, filtersAsArray);
@@ -119,6 +120,7 @@ const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
 
 /**
  * Use the `makeDropDown` function to create the first two levels of the linked drop down lists
+ * @returns {undefined}
  */
 const applyDropDown = function () {
   const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
@@ -130,6 +132,7 @@ const applyDropDown = function () {
 
 /**
  * Use the `makeDropDown` function to create the third level of the linked drop down lists
+ * @returns {undefined}
  */
 const applyDropDown2 = function () {
   const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
@@ -144,6 +147,7 @@ const applyDropDown2 = function () {
 
 /**
  * Use the `populateDropDown` function to populate the first level drop down
+ * @returns {undefined}
  */
 const populateFirstLevelDropDown = function () {
   const el = document.querySelector("#drop-down--bldg");
@@ -230,6 +234,34 @@ const getBuildingSensorSamplingRateAbbreviation = function (
   return [buildingAbbrev, phenomenonAbbrev, samplingRateAbbrev];
 };
 
+/**
+ * Show a loading indicator at the start of an async task. The indicator consists of a spinner and a transluscent mask placed on top of page elements
+ * @returns {undefined}
+ */
+const showLoadingSpinner = function () {
+  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
+  const loadingIconSpinner = document.querySelector("#loadingIcon");
+
+  loadingIndicatorMask.style.display = "block";
+  loadingIconSpinner.style.display = "block";
+};
+
+/**
+ * Hide the loading indicator after completion of the async tasks
+ * @returns {undefined}
+ */
+const hideLoadingSpinner = function () {
+  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
+  const loadingIconSpinner = document.querySelector("#loadingIcon");
+
+  loadingIndicatorMask.style.display = "none";
+  loadingIconSpinner.style.display = "none";
+};
+
+/**
+ * Callback function for chart selection using drop down list
+ * @returns {undefined}
+ */
 const selectChartTypeFromDropDown = async function () {
   try {
     const selectedOptions = getSelectedOptionsFromDropDownLists();
@@ -250,8 +282,10 @@ const selectChartTypeFromDropDown = async function () {
 
     if (selectedChartType === "--Select--") return;
 
-    const URL_DATASTREAM = getDatastreamUrl(BASE_URL, selectedDatastream);
+    // Display the loading indicator
+    showLoadingSpinner();
 
+    const URL_DATASTREAM = getDatastreamUrl(BASE_URL, selectedDatastream);
     const URL_OBSERVATIONS = getObservationsUrl(BASE_URL, selectedDatastream);
 
     // Create promises
@@ -283,6 +317,9 @@ const selectChartTypeFromDropDown = async function () {
     }
   } catch (err) {
     console.error(err);
+  } finally {
+    // Hide the loading indicator
+    hideLoadingSpinner();
   }
 };