Reduce stuttering of items using dynamic answerExpressions

aehrc · Aug 27, 2024 · 51550fc · 51550fc
1 parent 361dfdc
commit 51550fc
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 43 deletions.
diff --git a/packages/smart-forms-renderer/src/components/Alert.styles.ts b/packages/smart-forms-renderer/src/components/Alert.styles.ts
@@ -20,11 +20,12 @@ import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 export const StyledAlert = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'color'
-})<{ color: 'info' | 'error' }>(({ theme, color }) => ({
+  shouldForwardProp: (prop) => prop !== 'color' && prop != 'height'
+})<{ color: 'info' | 'error'; height?: number }>(({ theme, color, height }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: theme.spacing(1.25),
+  height: height ?? 'auto',
   borderRadius: Number(theme.shape.borderRadius) * 1.5,
   backgroundColor: alpha(
     color === 'error' ? theme.palette.error.light : theme.palette.info.light,

diff --git a/...ms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx b/...ms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx
@@ -31,10 +31,13 @@ import Tooltip from '@mui/material/Tooltip';
 import Button from '@mui/material/Button';
 import { grey } from '@mui/material/colors';
 import Fade from '@mui/material/Fade';
+import CircularProgress from '@mui/material/CircularProgress';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
+  optionsLoading: boolean;
   valueRadio: string | null;
   readOnly: boolean;
   calcExpUpdated: boolean;
@@ -47,6 +50,7 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
   const {
     qItem,
     options,
+    optionsLoading,
     valueRadio,
     readOnly,
     calcExpUpdated,
@@ -57,6 +61,17 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
+  if (optionsLoading) {
+    return (
+      <Fade in={optionsLoading} timeout={300}>
+        <Box display="flex" alignItems="center" columnGap={2}>
+          <CircularProgress size={24} />
+          <Typography>Loading options...</Typography>
+        </Box>
+      </Fade>
+    );
+  }
+
   if (options.length > 0) {
     return (
       <Box display="flex" alignItems="center">
@@ -94,23 +109,25 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
 
   if (terminologyError.error) {
     return (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server for{' '}
-          {terminologyError.answerValueSet}
-        </Typography>
-      </StyledAlert>
+      <Fade in={true} timeout={300}>
+        <StyledAlert color="error">
+          <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+          <Typography variant="subtitle2">
+            There was an error fetching options from the terminology server for{' '}
+            {terminologyError.answerValueSet}
+          </Typography>
+        </StyledAlert>
+      </Fade>
     );
   }
 
   return (
-    <StyledAlert color="error">
-      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-      <Typography variant="subtitle2">
-        Unable to fetch options from the questionnaire or launch context
-      </Typography>
-    </StyledAlert>
+    <Fade in={true} timeout={300}>
+      <StyledAlert color="info" height={36}>
+        <InfoOutlinedIcon color="info" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">No options available</Typography>
+      </StyledAlert>
+    </Fade>
   );
 }
 

diff --git a/...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx b/...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx
@@ -91,6 +91,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
       <ChoiceRadioAnswerValueSetFields
         qItem={qItem}
         options={options}
+        optionsLoading={isLoading}
         valueRadio={valueRadio}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
@@ -110,6 +111,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         <ChoiceRadioAnswerValueSetFields
           qItem={qItem}
           options={options}
+          optionsLoading={isLoading}
           valueRadio={valueRadio}
           readOnly={readOnly}
           calcExpUpdated={calcExpUpdated}

diff --git a/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx b/...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx
@@ -29,6 +29,7 @@ import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { Fade } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -115,24 +116,27 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     );
   }
 
-  if (codings.length === 0) {
+  if (terminologyError.error) {
     return (
-      <StyledAlert color="info">
-        <Typography variant="subtitle2">
-          There are no options available for {terminologyError.answerValueSet}
-        </Typography>
-      </StyledAlert>
+      <Fade in={true} timeout={300}>
+        <StyledAlert color="error">
+          <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+          <Typography variant="subtitle2">
+            There was an error fetching options from the terminology server for{' '}
+            {terminologyError.answerValueSet}
+          </Typography>
+        </StyledAlert>
+      </Fade>
     );
   }
 
-  // Fallback when something went wrong
   return (
-    <StyledAlert color="error">
-      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-      <Typography variant="subtitle2">
-        Unable to fetch options from the questionnaire or launch context
-      </Typography>
-    </StyledAlert>
+    <Fade in={true} timeout={300}>
+      <StyledAlert color="info" height={36}>
+        <InfoOutlinedIcon color="info" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">No options available</Typography>
+      </StyledAlert>
+    </Fade>
   );
 }
 

diff --git a/...rer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx b/...rer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx
@@ -26,6 +26,7 @@ import { getChoiceOrientation } from '../../../utils/choice';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import Typography from '@mui/material/Typography';
 import { Fade } from '@mui/material';
 import Box from '@mui/material/Box';
@@ -97,23 +98,25 @@ function OpenChoiceRadioAnswerValueSetFields(props: OpenChoiceRadioAnswerValueSe
 
   if (terminologyError.error) {
     return (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server for{' '}
-          {terminologyError.answerValueSet}
-        </Typography>
-      </StyledAlert>
+      <Fade in={true} timeout={300}>
+        <StyledAlert color="error">
+          <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+          <Typography variant="subtitle2">
+            There was an error fetching options from the terminology server for{' '}
+            {terminologyError.answerValueSet}
+          </Typography>
+        </StyledAlert>
+      </Fade>
     );
   }
 
   return (
-    <StyledAlert color="error">
-      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-      <Typography variant="subtitle2">
-        Unable to fetch options from the questionnaire or launch context
-      </Typography>
-    </StyledAlert>
+    <Fade in={true} timeout={300}>
+      <StyledAlert color="info" height={36}>
+        <InfoOutlinedIcon color="info" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">No options available</Typography>
+      </StyledAlert>
+    </Fade>
   );
 }
 

diff --git a/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts b/packages/smart-forms-renderer/src/hooks/useValueSetCodings.ts
@@ -131,9 +131,8 @@ function useValueSetCodings(
   // Dynamic answerExpression
   const answerExpression: AnswerExpression | null = answerExpressions[qItem.linkId] ?? null;
   useEffect(() => {
-    let newCodings: Coding[] = [];
     if (answerExpression && Array.isArray(answerExpression.options)) {
-      newCodings = convertAnswerOptionsToCodings(answerExpression.options);
+      const newCodings = convertAnswerOptionsToCodings(answerExpression.options);
       if (!_isEqual(newCodings, codings)) {
         setCodings(newCodings);
         onDynamicValueSetCodingsChange();