UHF-8211: Common error message for react searches

src/js/react/apps/job-search/containers/SearchContainer.tsx

@@ -1,13 +1,17 @@
-import { LoadingSpinner } from 'hds-react';
 import { Suspense } from 'react';
 
+import LoadingOverlay from '@/react/common/LoadingOverlay';
 import FormContainer from './FormContainer';
 import ResultsContainer from './ResultsContainer';
 
 const SearchContainer = () => (
   <div className='recruitment-search'>
     {/* For async atoms that need to load option values from elastic */}
-    <Suspense fallback={<LoadingSpinner loadingText="" loadingFinishedText="" />}>
+    <Suspense fallback={
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
+      </div>
+    }>
       <FormContainer />
       {!drupalSettings?.helfi_rekry_job_search?.results_page_path && <ResultsContainer />}
     </Suspense>

src/js/react/apps/linkedevents/containers/ResultsContainer.tsx

@@ -1,12 +1,14 @@
-import { LoadingSpinner} from 'hds-react';
-
+import { createRef } from 'react';
 import { useAtomValue } from 'jotai';
-import type Event from '../types/Event';
+
+import ResultsError from '@/react/common/ResultsError';
+import LoadingOverlay from '@/react/common/LoadingOverlay';
+import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 import Pagination from '../components/Pagination';
-import EmptyMessage from '../components/EmptyMessage';
 import ResultCard from '../components/ResultCard';
 import SeeAllButton from '../components/SeeAllButton';
 import { settingsAtom } from '../store';
+import type Event from '../types/Event';
 
 type ResultsContainerProps = {
   count: number;
@@ -17,47 +19,55 @@ type ResultsContainerProps = {
 
 function ResultsContainer({ count, events, loading, error }: ResultsContainerProps) {
   const settings = useAtomValue(settingsAtom);
-
-  if (error || !settings) {
-    return <p>{Drupal.t('Could not retrieve events')}</p>;
-  }
+  const scrollTarget = createRef<HTMLDivElement>();
+  useScrollToResults(scrollTarget, true);
 
   if (loading) {
     return (
-      <div className='event-list__loading-spinner'>
-        <LoadingSpinner loadingText="" loadingFinishedText="" />
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
       </div>
     );
   }
 
+  if (error) {
+    return (
+      <ResultsError
+        error={error}
+        ref={scrollTarget}
+      />
+    );
+  }
+
   const size = settings.eventCount;
   const pages = Math.floor(count / size);
   const addLastPage = count > size && count % size;
-
   const showCount = !Number.isNaN(count) && !loading;
 
   return (
     <div className='react-search__list-container'>
-      <div className='react-search__results-stats'>
-      {Boolean(showCount) &&
-        <>
-          <span className='react-search__count'>{count} </span>
-          <span>{Drupal.t('events')}</span>
-        </>
-      }
+      <div className='react-search__results-stats' ref={scrollTarget}>
+        {Boolean(showCount) &&
+          <>
+            <span className='react-search__count'>{count} </span>
+            <span>{Drupal.t('events')}</span>
+          </>
+        }
       </div>
       {events?.length > 0 ?
         <>
           {events.map(event => <ResultCard key={event.id} {...event} />)}
           <Pagination pages={5} totalPages={addLastPage ? pages + 1 : pages} />
         </>
         :
-        <EmptyMessage />
+        <div className='event-list__no-results' ref={scrollTarget}>
+          <h3>{Drupal.t('This event list is empty.')}</h3>
+          <p className='events-list__empty-subtext'>{Drupal.t('No worries though, this city does not run out of things to do.')}</p>
+        </div>
       }
       <SeeAllButton />
     </div>
   );
-
 }
 
 export default ResultsContainer;

src/js/react/apps/linkedevents/containers/SearchContainer.tsx

@@ -1,5 +1,6 @@
 import useSWR from 'swr';
 import { useAtomValue, useAtom } from 'jotai';
+
 import ResultsContainer from './ResultsContainer';
 import FormContainer from './FormContainer';
 import type Event from '../types/Event';

src/js/react/apps/linkedevents/index.tsx

@@ -1,5 +1,7 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
+
+import LoadingOverlay from '@/react/common/LoadingOverlay';
 import SearchContainer from './containers/SearchContainer';
 import ROOT_ID from './enum/RootId';
 
@@ -13,7 +15,11 @@ const start = () => {
 
   ReactDOM.render(
     <React.StrictMode>
-      <Suspense fallback="...loading">
+      <Suspense fallback={
+        <div className='hdbt__loading-wrapper'>
+          <LoadingOverlay />
+        </div>
+      }>
         <SearchContainer />
       </Suspense>
     </React.StrictMode>,

src/js/react/apps/school-search/components/ResultsList.tsx

@@ -1,11 +1,12 @@
 import { SyntheticEvent, createRef, useState } from 'react';
-import { Button, IconMap, IconMenuHamburger, LoadingSpinner } from 'hds-react';
+import { Button, IconMap, IconMenuHamburger } from 'hds-react';
 import { useAtomValue } from 'jotai';
-import * as Sentry from '@sentry/react';
 
 import Result from '@/types/Result';
 import Pagination from '@/react/common/Pagination';
 import useScrollToResults from '@/react/common/hooks/useScrollToResults';
+import LoadingOverlay from '@/react/common/LoadingOverlay';
+import ResultsError from '@/react/common/ResultsError';
 import GlobalSettings from '../enum/GlobalSettings';
 import { School } from '../types/School';
 import ResultCard from './ResultCard';
@@ -14,7 +15,7 @@ import { paramsAtom } from '../store';
 
 type ResultsListProps = {
   data: any;
-  error: boolean;
+  error: string|Error;
   isLoading: boolean;
   isValidating: boolean;
   page?: number;
@@ -26,21 +27,29 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
   const { size } = GlobalSettings;
   const params = useAtomValue(paramsAtom);
   const scrollTarget = createRef<HTMLDivElement>();
-
   const choices = Boolean(Object.keys(params).length);
   useScrollToResults(scrollTarget, choices);
 
   if (isLoading || isValidating) {
-    return <LoadingSpinner loadingText="" loadingFinishedText="" />;
+    return (
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
+      </div>
+    );
   }
 
-  if (!data?.hits?.hits.length || error) {
-    if (error) {
-      Sentry.captureException(error);
-    }
+  if (error) {
+    return (
+      <ResultsError
+        error={error}
+        ref={scrollTarget}
+      />
+    );
+  }
 
+  if (!data?.hits?.hits.length) {
     return (
-      <div className='react-search__no-results' ref={scrollTarget}>
+      <div ref={scrollTarget}>
         {Drupal.t('No results', {}, {context: 'No search results'})}
       </div>
     );
@@ -50,7 +59,6 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
   const total = data.hits.total.value;
   const pages = Math.floor(total / size);
   const addLastPage = total > size && total % size;
-
   const showPagination = !useMap && (pages > 1 || addLastPage);
 
   return (

src/js/react/apps/school-search/containers/SearchContainer.tsx

@@ -1,6 +1,8 @@
-import { LoadingSpinner, Tab, TabList, Tabs } from 'hds-react';
+import { Tab, TabList, Tabs } from 'hds-react';
 import { Suspense, useState } from 'react';
 import { useSetAtom } from 'jotai';
+
+import LoadingOverlay from '@/react/common/LoadingOverlay';
 import ProximityFormContainer from './ProximityFormContainer';
 import ProximityResultsContainer from './ProximityResultsContainer';
 import FeatureFormContainer from './FeatureFormContainer';
@@ -21,7 +23,7 @@ const SearchContainer = () => {
   const changeSearchMode = (mode: string) => {
     if (mode === searchMode) {
       return;
-    } 
+    }
 
     setParams({});
     setSearchMode(mode);
@@ -47,7 +49,11 @@ const SearchContainer = () => {
           </Tab>
         </TabList>
       </Tabs>
-      <Suspense fallback={<LoadingSpinner loadingText="" loadingFinishedText="" />}>
+      <Suspense fallback={
+        <div className='hdbt__loading-wrapper'>
+          <LoadingOverlay />
+        </div>
+      }>
         {
           searchMode === MODE_OPTIONS.proximity ?
             <div>

src/js/react/common/ResultsError.tsx

@@ -3,15 +3,19 @@ import { ForwardedRef, forwardRef } from 'react';
 
 type ResultsErrorProps = {
   error: string|Error;
-  className: string;
+  className?: string;
 }
 
-const ResultsError = forwardRef(({ error, className }: ResultsErrorProps, ref: ForwardedRef<HTMLDivElement> ) => {
-  console.warn(`Error loading data. ${error}`);
-  Sentry.captureException(error);
+const ResultsError = forwardRef(({ error, className }: ResultsErrorProps, ref: ForwardedRef<HTMLDivElement>) => {
+  console.warn(`Error loading data from Elastic: ${error}`);
+
+  if (drupalSettings?.helfi_react_search?.sentry_dsn_react) {
+    Sentry.captureException(error);
+  }
+
   return (
     <div className={className} ref={ref}>
-      {Drupal.t('The website encountered an unexpected error. Please try again later.')}
+      {Drupal.t('An error occured while loading the content. Please reload page.', {}, { context: 'React search' })}
     </div>
   );
 });

src/scss/06_components/paragraphs/_event-list.scss

@@ -71,10 +71,6 @@ $tag-vertical-padding: 5px;
   text-align: center;
 }
 
-.event-list__loading-spinner > div {
-  margin-inline: auto;
-}
-
 .event-list__filter-title {
   @include font('h3');
 }

translations/fi.po

@@ -690,3 +690,7 @@ msgstr "Soita"
 msgctxt "Explanation for users that the link opens in a new tab instead of the expected current tab"
 msgid "The link opens in a new tab"
 msgstr "Linkki avautuu uuteen välilehteen"
+
+msgctxt "React search"
+msgid "An error occured while loading the content. Please reload page."
+msgstr "Sisällön lataamisessa tapahtui virhe. Kokeile ladata sivu uudelleen."

translations/sv.po

@@ -683,3 +683,7 @@ msgstr "Ring upp"
 msgctxt "Explanation for users that the link opens in a new tab instead of the expected current tab"
 msgid "The link opens in a new tab"
 msgstr "Länken öppnas i en ny flik"
+
+msgctxt "React search"
+msgid "An error occured while loading the content. Please reload page."
+msgstr "Ett fel uppstod vid hämtning av innehållet. Vänligen ladda om sidan."