diff --git a/resources/scripts/components/elements/SpinnerOverlay.tsx b/resources/scripts/components/elements/SpinnerOverlay.tsx index 58d17757e..fb18b66e1 100644 --- a/resources/scripts/components/elements/SpinnerOverlay.tsx +++ b/resources/scripts/components/elements/SpinnerOverlay.tsx @@ -10,16 +10,17 @@ interface Props { backgroundOpacity?: number; } -const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => ( +const SpinnerOverlay: React.FC = ({ size, fixed, visible, backgroundOpacity, children }) => (
+ {children && (typeof children === 'string' ?

{children}

: children)}
); diff --git a/resources/scripts/components/server/files/MassActionsBar.tsx b/resources/scripts/components/server/files/MassActionsBar.tsx index 1d8e5c9cf..fc3b3b36e 100644 --- a/resources/scripts/components/server/files/MassActionsBar.tsx +++ b/resources/scripts/components/server/files/MassActionsBar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import { useFormikContext } from 'formik'; @@ -19,13 +19,19 @@ const MassActionsBar = () => { const { mutate } = useFileManagerSwr(); const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ loading, setLoading ] = useState(false); + const [ loadingMessage, setLoadingMessage ] = useState(''); const [ showConfirm, setShowConfirm ] = useState(false); const { values, setFieldValue } = useFormikContext<{ selectedFiles: string[] }>(); const directory = ServerContext.useStoreState(state => state.files.directory); + useEffect(() => { + if (!loading) setLoadingMessage(''); + }, [ loading ]); + const onClickCompress = () => { setLoading(true); clearFlashes('files'); + setLoadingMessage('Archiving files...'); compressFiles(uuid, directory, values.selectedFiles) .then(() => mutate()) @@ -38,6 +44,7 @@ const MassActionsBar = () => { setLoading(true); setShowConfirm(false); clearFlashes('files'); + setLoadingMessage('Deleting files...'); deleteFiles(uuid, directory, values.selectedFiles) .then(() => { @@ -54,7 +61,9 @@ const MassActionsBar = () => { return ( 0} unmountOnExit>
- + + {loadingMessage} +