add loading spinner during creation udpate api call
This commit is contained in:
parent
e37d08fbae
commit
3c4a0f7b6a
|
@ -13,8 +13,21 @@ const isSameDay = (first, second) =>
|
|||
first.getMonth() === second.getMonth() &&
|
||||
first.getDate() === second.getDate();
|
||||
|
||||
const EnteDateTimePicker = ({ isInEditMode, pickedTime, handleChange }) => (
|
||||
interface Props {
|
||||
loading?: boolean;
|
||||
isInEditMode: boolean;
|
||||
pickedTime: Date;
|
||||
handleChange: (date: Date) => void;
|
||||
}
|
||||
|
||||
const EnteDateTimePicker = ({
|
||||
loading,
|
||||
isInEditMode,
|
||||
pickedTime,
|
||||
handleChange,
|
||||
}: Props) => (
|
||||
<DatePicker
|
||||
disabled={loading}
|
||||
open={isInEditMode}
|
||||
selected={pickedTime}
|
||||
onChange={handleChange}
|
||||
|
|
|
@ -90,6 +90,7 @@ function RenderCreationTime({
|
|||
file: File;
|
||||
scheduleUpdate: () => void;
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const originalCreationTime = new Date(file?.metadata.creationTime / 1000);
|
||||
const [isInEditMode, setIsInEditMode] = useState(false);
|
||||
|
||||
|
@ -100,6 +101,7 @@ function RenderCreationTime({
|
|||
|
||||
const saveEdits = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
if (isInEditMode && file) {
|
||||
const unixTimeInMicroSec = pickedTime.getTime() * 1000;
|
||||
if (unixTimeInMicroSec === file?.metadata.creationTime) {
|
||||
|
@ -118,14 +120,16 @@ function RenderCreationTime({
|
|||
}
|
||||
} catch (e) {
|
||||
logError(e, 'failed to update creationTime');
|
||||
}
|
||||
} finally {
|
||||
closeEditMode();
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const discardEdits = () => {
|
||||
setPickedTime(originalCreationTime);
|
||||
closeEditMode();
|
||||
};
|
||||
const handleChange = (newDate) => {
|
||||
const handleChange = (newDate: Date) => {
|
||||
if (newDate instanceof Date) {
|
||||
setPickedTime(newDate);
|
||||
}
|
||||
|
@ -137,6 +141,7 @@ function RenderCreationTime({
|
|||
<Value width={isInEditMode ? '50%' : '60%'}>
|
||||
{isInEditMode ? (
|
||||
<EnteDateTimePicker
|
||||
loading={loading}
|
||||
isInEditMode={isInEditMode}
|
||||
pickedTime={pickedTime}
|
||||
handleChange={handleChange}
|
||||
|
@ -155,7 +160,16 @@ function RenderCreationTime({
|
|||
) : (
|
||||
<>
|
||||
<IconButton onClick={saveEdits}>
|
||||
{loading ? (
|
||||
<EnteSpinner
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<TickIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton onClick={discardEdits}>
|
||||
<CloseIcon />
|
||||
|
|
Loading…
Reference in a new issue