OpenConceptLab/ocl_issues#1363 | Concept search results getting loade…

…d component
OpenConceptLab · Nov 22, 2022 · 9abd3d2 · 9abd3d2
1 parent 755acc8
commit 9abd3d2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/components/common/AutocompleteLoading.jsx b/src/components/common/AutocompleteLoading.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, LinearProgress } from '@mui/material'
+import { BLACK } from '../../common/constants'
+
+const AutocompleteLoading = ({ text }) => {
+
+  return (
+    <React.Fragment>
+      <Box sx={{ width: '100%', margin: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
+        {
+          text &&
+            <div className='col-xs-12' style={{width: '100%', textAlign: 'center', marginBottom: '10px', color: BLACK}}>
+              Loading results for <b>{ text }</b>
+            </div>
+        }
+        <div className='col-xs-8'>
+          <LinearProgress />
+        </div>
+      </Box>
+
+    </React.Fragment>
+  )
+}
+
+export default AutocompleteLoading;
diff --git a/src/components/common/ConceptSearchAutocomplete.jsx b/src/components/common/ConceptSearchAutocomplete.jsx
@@ -7,6 +7,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import { get, debounce, orderBy } from 'lodash'
 import APIService from '../../services/APIService';
 import { BLUE } from '../../common/constants';
+import AutocompleteLoading from './AutocompleteLoading';
 
 const ConceptSearchAutocomplete = ({onChange, label, id, required, minCharactersForSearch, size, parentURI, disabled}) => {
   const minLength = minCharactersForSearch || 1;
@@ -58,7 +59,11 @@ const ConceptSearchAutocomplete = ({onChange, label, id, required, minCharacters
       size={size || 'medium'}
       options={concepts}
       loading={loading}
-      loadingText={loading ? 'Loading...' : `Type atleast ${minLength} characters to search`}
+      loadingText={
+        loading ?
+          <AutocompleteLoading text={input} /> :
+        `Type atleast ${minLength} characters to search`
+      }
       noOptionsText={(isSearchable && !loading) ? "No results" : 'Start typing...'}
       getOptionLabel={option => option ? option.id : ''}
       fullWidth
@@ -99,9 +104,12 @@ const ConceptSearchAutocomplete = ({onChange, label, id, required, minCharacters
                   <Typography
                     sx={{ maxWidth: 'calc(100% - 90px)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                     <span>{option.display_name}</span>
-                    <span style={{color: 'rgba(0, 0, 0, 0.6)', marginLeft: '5px'}}>
-                      <i>{`[${option.display_locale}]`}</i>
-                    </span>
+                    {
+                      option.display_locale &&
+                        <span style={{color: 'rgba(0, 0, 0, 0.6)', marginLeft: '5px'}}>
+                          <i>{`[${option.display_locale}]`}</i>
+                        </span>
+                    }
                   </Typography>
                 }
                 secondary={