Add LoadingWrapper to indicate loading

This is the first iteration of the loading wrapper and is used to hide elements and indicate loading
during the load time. It also has an optional loading text, which is rendered below the spinner.

Resolves HSLdevcom/jore4#1499

Author: HenrikHartiala

ui/src/components/routes-and-lines/search/SearchResultPage.tsx

@@ -5,6 +5,7 @@ import { usePagination } from '../../../hooks/usePagination';
 import { Container, Row, Visible } from '../../../layoutComponents';
 import { Path } from '../../../router/routeDetails';
 import { CloseIconButton, Pagination } from '../../../uiComponents';
+import { LoadingWrapper } from '../../../uiComponents/LoadingWrapper';
 import { RouteLineTableRowVariant } from '../../common/RouteLineTableRow';
 import { ResultList } from '../../common/search/ResultList';
 import { ExportToolbar } from './ExportToolbar';
@@ -16,7 +17,7 @@ export const SearchResultPage = (): JSX.Element => {
   const { resultCount } = useSearchResults();
   const { t } = useTranslation();
   const { getPaginatedData } = usePagination();
-  const { lines, reducedRoutes } = useSearchResults();
+  const { lines, reducedRoutes, loading } = useSearchResults();
   const { basePath } = useBasePath();
   const itemsPerPage = 10;
 
@@ -26,6 +27,7 @@ export const SearchResultPage = (): JSX.Element => {
   const testIds = {
     container: 'SearchResultsPage::Container',
     closeButton: 'SearchResultsPage::closeButton',
+    loadingSearchResults: 'LoadingWrapper::loadingSearchResults',
   };
 
   const determineDisplayInformation = () => {
@@ -60,23 +62,30 @@ export const SearchResultPage = (): JSX.Element => {
         />
       </Row>
       <SearchContainer />
-      <FiltersContainer />
-      <ExportToolbar />
-      <ResultList
-        lines={displayedLines}
-        routes={displayedRoutes}
-        rowVariant={displayInformation.rowVariant}
-        displayedType={queryParameters.filter.displayedType}
-      />
-      <Visible visible={!!resultCount}>
-        <div className="grid grid-cols-4">
-          <Pagination
-            className="col-span-2 col-start-2 pt-4"
-            itemsPerPage={itemsPerPage}
-            totalItemsCount={resultCount}
-          />
-        </div>
-      </Visible>
+      <LoadingWrapper
+        className="flex justify-center"
+        loadingText={t('search.searching')}
+        loading={loading}
+        testId={testIds.loadingSearchResults}
+      >
+        <FiltersContainer />
+        <ExportToolbar />
+        <ResultList
+          lines={displayedLines}
+          routes={displayedRoutes}
+          rowVariant={displayInformation.rowVariant}
+          displayedType={queryParameters.filter.displayedType}
+        />
+        <Visible visible={!!resultCount}>
+          <div className="grid grid-cols-4">
+            <Pagination
+              className="col-span-2 col-start-2 pt-4"
+              itemsPerPage={itemsPerPage}
+              totalItemsCount={resultCount}
+            />
+          </div>
+        </Visible>
+      </LoadingWrapper>
     </Container>
   );
 };

ui/src/hooks/search/useSearchResults.ts

@@ -29,6 +29,7 @@ const GQL_SEARCH_LINES_AND_ROUTES = gql`
 `;
 
 export const useSearchResults = (): {
+  loading: boolean;
   lines: LineTableRowFragment[];
   /** Routes reduced to only have 1 direction per label */
   reducedRoutes: RouteTableRowFragment[];
@@ -45,6 +46,7 @@ export const useSearchResults = (): {
   const result = useSearchLinesAndRoutesQuery(
     mapToVariables(searchQueryVariables),
   );
+  const { loading } = result;
 
   const lines = result.data?.route_line || [];
   const routes = result.data?.route_route || [];
@@ -84,6 +86,7 @@ export const useSearchResults = (): {
   const resultType = parsedSearchQueryParameters.filter.displayedType;
 
   return {
+    loading,
     lines,
     reducedRoutes,
     routes,

ui/src/locales/en-US/common.json

@@ -294,7 +294,8 @@
     "resultCount": "{{ resultCount }} results",
     "searchPlaceholder": "Enter label",
     "searchLabel": "Search",
-    "search": "Search"
+    "search": "Search",
+    "searching": "Searching..."
   },
   "tableHeaders": {
     "name": "Name",

ui/src/locales/fi-FI/common.json

@@ -294,7 +294,8 @@
     "resultCount": "{{ resultCount }} hakutulosta",
     "searchPlaceholder": "Anna tunnus",
     "searchLabel": "Haku",
-    "search": "Hae"
+    "search": "Hae",
+    "searching": "Haku käynnissä..."
   },
   "tableHeaders": {
     "name": "Nimi",

ui/src/uiComponents/LoadingWrapper.tsx

@@ -0,0 +1,46 @@
+import { FunctionComponent } from 'react';
+import { PulseLoader } from 'react-spinners';
+import { theme } from '../generated/theme';
+
+interface Props {
+  testId: string;
+  loadingText?: string;
+  className?: string;
+  loading?: boolean;
+  size?: number;
+  color?: string;
+  speedMultiplier?: number;
+}
+
+/**
+ * This loading wrapper will render a React spinner if the loading parameter is true,
+ * but it will render the children if the loading parameter is false. So you can wrap the
+ * elements that need to be hidden during the loading with this, hence the name.
+ * There is also an optional loading text below the spinner.
+ */
+export const LoadingWrapper: FunctionComponent<Props> = ({
+  testId,
+  children,
+  loadingText,
+  className,
+  loading = true,
+  size = 25,
+  color = theme.colors.brand,
+  speedMultiplier = 0.7,
+}) => {
+  if (loading) {
+    return (
+      <div data-testid={testId} className={className}>
+        <div className="inline-flex flex-col items-center">
+          <PulseLoader
+            color={color}
+            size={size}
+            speedMultiplier={speedMultiplier}
+          />
+          {loadingText && <span>{loadingText}</span>}
+        </div>
+      </div>
+    );
+  }
+  return <>{children}</>;
+};