@civicactions/cmsds-open-data-components 1.16.0 → 1.16.1

package/lib/templates/DatasetSearch/index.js

@@ -89,6 +89,12 @@ var DatasetSearch = function DatasetSearch(_ref) {
       noResults = _useState4[0],
       setNoResults = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      loadingData = _useState6[0],
+      setLoadingData = _useState6[1];
+
+  var loadingRef = (0, _react.useRef)();
   var location = (0, _reactRouterDom.useLocation)();
 
   var _useSearchParams = (0, _reactRouterDom.useSearchParams)(),
@@ -96,10 +102,10 @@ var DatasetSearch = function DatasetSearch(_ref) {
       searchParams = _useSearchParams2[0],
       setSearchParams = _useSearchParams2[1];
 
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      filterText = _useState6[0],
-      setFilterText = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      filterText = _useState8[0],
+      setFilterText = _useState8[1];
 
   var _useSearchAPI = (0, _dataCatalogServices.useSearchAPI)(rootUrl, _objectSpread({}, transformUrlParamsToSearchObject(location.search, ['theme', 'keyword'], defaultSort)), additionalParams),
       fulltext = _useSearchAPI.fulltext,
@@ -166,6 +172,14 @@ var DatasetSearch = function DatasetSearch(_ref) {
       setSearchParams(params);
     }
   }, [page, sort, sortOrder, fulltext, selectedFacets]);
+  (0, _react.useEffect)(function () {
+    // when loading state was previously true and is now false, display data
+    if (!loading && loadingRef.current === true) {
+      setLoadingData(false);
+    }
+
+    loadingRef.current = loading;
+  }, [loading]);
   (0, _react.useEffect)(function () {
     var baseNumber = Number(totalItems) > 0 ? 1 : 0;
     var startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
@@ -195,7 +209,8 @@ var DatasetSearch = function DatasetSearch(_ref) {
       e.preventDefault();
 
       (function () {
-        return setFulltext(filterText);
+        if (filterText !== fulltext) setLoadingData(true);
+        setFulltext(filterText);
       });
     },
     className: formClassName
@@ -215,9 +230,14 @@ var DatasetSearch = function DatasetSearch(_ref) {
     htmlFor: "dataset_fulltext_search",
     variation: "primary",
     onClick: function onClick() {
-      return setFulltext(filterText);
+      if (filterText !== fulltext) setLoadingData(true);
+      setFulltext(filterText);
     }
-  }, "Search")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Search")), loadingData ? /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, {
+    className: "ds-u-valign--middle",
+    "aria-valuetext": "Dataset Search loading",
+    role: "status"
+  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end"
   }, /*#__PURE__*/_react["default"].createElement("div", null, currentResultNumbers && /*#__PURE__*/_react["default"].createElement("p", {
     className: "ds-u-margin-y--0"
@@ -259,7 +279,7 @@ var DatasetSearch = function DatasetSearch(_ref) {
       var includeAnd = searchParams ? '&' : '';
       return "/datasets?page=".concat(page).concat(includeAnd).concat(searchParams);
     }
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-md-col--4 ds-l-sm-col--12"
   }, showSort && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {