use layout effect for blocker

aehrc · Sep 21, 2023 · b315285 · b315285
1 parent 4cd634c
commit b315285
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/apps/smart-forms-app/src/features/renderer/hooks/useBlocker.ts b/apps/smart-forms-app/src/features/renderer/hooks/useBlocker.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import type { unstable_Blocker as Blocker } from 'react-router';
 import { unstable_useBlocker as useBlocker } from 'react-router';
 import { useQuestionnaireResponseStore } from '@aehrc/smart-forms-renderer';
@@ -26,7 +26,7 @@ function useLeavePageBlocker(): Blocker {
   const isBlocked = formChangesHistory.length > 0;
   const blocker = useBlocker(isBlocked);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (
       blocker.location?.pathname === '/renderer/preview' ||
       blocker.location?.pathname === '/renderer'

diff --git a/apps/smart-forms-app/src/features/repopulate/components/RepopulateSelectDialog.tsx b/apps/smart-forms-app/src/features/repopulate/components/RepopulateSelectDialog.tsx
@@ -15,7 +15,15 @@
  * limitations under the License.
  */
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography
+} from '@mui/material';
 import type { ItemToRepopulate } from '@aehrc/smart-forms-renderer';
 import {
   repopulate,
@@ -109,6 +117,10 @@ function RepopulateSelectDialog(props: RepopulateSelectDialogProps) {
         />
       </DialogContent>
       <DialogActions>
+        <Typography fontSize={10} color="text.secondary" sx={{ mx: 1.5 }}>
+          This is still an experimental feature, you might encounter bugs.
+        </Typography>
+        <Box flexGrow={1} />
         <Button onClick={onCloseDialog}>Cancel</Button>
         <Button onClick={() => handleConfirmRepopulate()}>Confirm</Button>
       </DialogActions>