add loading spinner during creation udpate api call

src/components/EnteDateTimePicker.tsx

@@ -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}

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -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);
         }
-        closeEditMode();
     };
     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}>
-                                <TickIcon />
+                                {loading ? (
+                                    <EnteSpinner
+                                        style={{
+                                            width: '20px',
+                                            height: '20px',
+                                        }}
+                                    />
+                                ) : (
+                                    <TickIcon />
+                                )}
                             </IconButton>
                             <IconButton onClick={discardEdits}>
                                 <CloseIcon />