feat: uploading skeletons

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -69,7 +69,6 @@ export default function OptionsAndPicture({
 
     setPictureUploading(true);
 
-    try {
     const url = await uploadQuestionImage(
       question.id,
       quizQid,
@@ -88,7 +87,6 @@ export default function OptionsAndPicture({
     );
     closeImageUploadModal();
     openCropModal(file, url);
-    } catch {}
 
     setPictureUploading(false);
   };

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -63,7 +63,6 @@ export default function OptionsPicture({
 
     setPictureUploading(true);
 
-    try {
     const url = await uploadQuestionImage(
       question.id,
       quizQid,
@@ -83,7 +82,6 @@ export default function OptionsPicture({
 
     closeImageUploadModal();
     openCropModal(file, url);
-    } catch {}
 
     setPictureUploading(false);
   };

src/pages/Questions/UploadImage/index.tsx

@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
+import { Box, Skeleton, Typography, useTheme } from "@mui/material";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@@ -12,6 +13,7 @@ type UploadImageProps = {
 };
 
 export default function UploadImage({ question }: UploadImageProps) {
+  const [pictureUploding, setPictureUploading] = useState<boolean>(false);
   const theme = useTheme();
   const quiz = useCurrentQuiz();
 
@@ -29,29 +31,50 @@ export default function UploadImage({ question }: UploadImageProps) {
       >
         Загрузить изображение
       </Typography>
+      {pictureUploding ? (
+        <Skeleton variant="rounded" sx={{ height: "120px", width: "300px" }} />
+      ) : (
         <DropZone
           text={"5 MB максимум"}
-        heightImg={"110px"}
           sx={{ maxWidth: "300px", width: "100%" }}
           imageUrl={question.content.back}
           originalImageUrl={question.content.originalBack}
-        onImageUploadClick={(file) => {
+          onImageUploadClick={async (file) => {
-          uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
+            setPictureUploading(true);
+
+            await uploadQuestionImage(
+              question.id,
+              quiz.qid,
+              file,
+              (question, url) => {
                 question.content.back = url;
                 question.content.originalBack = url;
-          });
+              },
+            );
+
+            setPictureUploading(false);
           }}
           onDeleteClick={() => {
             updateQuestion(question.id, (question) => {
               question.content.back = null;
             });
           }}
-        onImageSaveClick={(file) => {
+          onImageSaveClick={async (file) => {
-          uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
+            setPictureUploading(true);
+
+            await uploadQuestionImage(
+              question.id,
+              quiz.qid,
+              file,
+              (question, url) => {
                 question.content.back = url;
-          });
+              },
+            );
+
+            setPictureUploading(false);
           }}
         />
+      )}
     </Box>
   );
 }

src/pages/startPage/StartPageSettings.tsx

@@ -25,6 +25,7 @@ import {
   Select,
   Tooltip,
   Typography,
+  Skeleton,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -75,6 +76,9 @@ export default function StartPageSettings() {
   const quiz = useCurrentQuiz();
   const [formState, setFormState] = useState<"design" | "content">("design");
   const [mobileVersion, setMobileVersion] = useState(false);
+  const [faviconUploding, setFaviconUploading] = useState<boolean>(false);
+  const [backgroundUploding, setBackgroundUploading] = useState<boolean>(false);
+  const [logoUploding, setLogoUploading] = useState<boolean>(false);
 
   if (!quiz) return null;
 
@@ -84,14 +88,20 @@ export default function StartPageSettings() {
 
   const designType = quiz?.config?.startpageType;
 
-  const favIconDropZoneElement = (
+  const favIconDropZoneElement = faviconUploding ? (
+    <Skeleton sx={{ width: "48px", height: "48px", transform: "none" }} />
+  ) : (
     <FaviconDropZone
       imageUrl={quiz.config.startpage.favIcon}
       onImageUploadClick={async (file) => {
+        setFaviconUploading(true);
         const resizedImage = await resizeFavIcon(file);
-        uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
+
+        await uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
           quiz.config.startpage.favIcon = url;
         });
+
+        setFaviconUploading(false);
       }}
       onDeleteClick={() => {
         updateQuiz(quiz.id, (quiz) => {
@@ -330,23 +340,39 @@ export default function StartPageSettings() {
                   >
                     Изображение
                   </Typography>
+                  {backgroundUploding ? (
+                    <Skeleton
+                      sx={{
+                        width: "300px",
+                        height: "120px",
+                        transform: "none",
+                      }}
+                    />
+                  ) : (
                     <DropZone
-                    value={"5 MB максимум"}
+                      text={"5 MB максимум"}
                       sx={{ maxWidth: "300px" }}
                       imageUrl={quiz.config.startpage.background.desktop}
                       originalImageUrl={
                         quiz.config.startpage.background.originalDesktop
                       }
-                    onImageUploadClick={(file) => {
+                      onImageUploadClick={async (file) => {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        setBackgroundUploading(true);
+                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                           quiz.config.startpage.background.desktop = url;
-                        quiz.config.startpage.background.originalDesktop = url;
+                          quiz.config.startpage.background.originalDesktop =
+                            url;
                         });
+
+                        setBackgroundUploading(false);
                       }}
-                    onImageSaveClick={(file) => {
+                      onImageSaveClick={async (file) => {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        setBackgroundUploading(true);
+                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                           quiz.config.startpage.background.desktop = url;
                         });
+
+                        setBackgroundUploading(false);
                       }}
                       onDeleteClick={() => {
                         updateQuiz(quiz.id, (quiz) => {
@@ -354,6 +380,7 @@ export default function StartPageSettings() {
                         });
                       }}
                     />
+                  )}
                 </Box>
 
                 <ModalSizeImage />
@@ -386,6 +413,17 @@ export default function StartPageSettings() {
                     </Tooltip>
                   )}
                 </Box>
+                {backgroundUploding ? (
+                  <Skeleton
+                    sx={{
+                      width: "48px",
+                      height: "48px",
+                      transform: "none",
+                      margin: "20px 0",
+                    }}
+                  />
+                ) : (
+                  <>
                     <ButtonBase
                       component="label"
                       sx={{
@@ -398,14 +436,22 @@ export default function StartPageSettings() {
                       }}
                     >
                       <input
-                    onChange={(event) => {
+                        onChange={async (event) => {
+                          setBackgroundUploading(true);
                           const file = event.target.files?.[0];
+
                           if (file) {
-                        uploadQuizImage(quiz.id, file, (quiz, url) => {
+                            await uploadQuizImage(
+                              quiz.id,
+                              file,
+                              (quiz, url) => {
                                 quiz.config.startpage.background.video = url;
-                        });
+                              },
+                            );
                             // setVideo(URL.createObjectURL(file));
                           }
+
+                          setBackgroundUploading(false);
                         }}
                         hidden
                         accept=".mp4"
@@ -420,13 +466,15 @@ export default function StartPageSettings() {
                         }}
                       />
                     </ButtonBase>
-                {quiz.config.startpage.background.video ? (
+                    {quiz.config.startpage.background.video && (
                       <video
                         src={quiz.config.startpage.background.video}
                         width="400"
                         controls
                       />
-                ) : null}
+                    )}
+                  </>
+                )}
               </>
             )}
             {designType !== "centered" && (
@@ -500,21 +548,36 @@ export default function StartPageSettings() {
                   >
                     Логотип
                   </Typography>
+                  {logoUploding ? (
+                    <Skeleton
+                      sx={{
+                        width: "300px",
+                        height: "120px",
+                        transform: "none",
+                      }}
+                    />
+                  ) : (
                     <DropZone
-                    value={"5 MB максимум"}
+                      text={"5 MB максимум"}
                       sx={{ maxWidth: "300px" }}
                       imageUrl={quiz.config.startpage.logo}
                       originalImageUrl={quiz.config.startpage.originalLogo}
-                    onImageUploadClick={(file) => {
+                      onImageUploadClick={async (file) => {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        setLogoUploading(true);
+                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                           quiz.config.startpage.logo = url;
                           quiz.config.startpage.originalLogo = url;
                         });
+
+                        setLogoUploading(false);
                       }}
-                    onImageSaveClick={(file) => {
+                      onImageSaveClick={async (file) => {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        setLogoUploading(true);
+                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                           quiz.config.startpage.logo = url;
                         });
+
+                        setLogoUploading(false);
                       }}
                       onDeleteClick={() => {
                         updateQuiz(quiz.id, (quiz) => {
@@ -522,6 +585,7 @@ export default function StartPageSettings() {
                         });
                       }}
                     />
+                  )}
                 </Box>
 
                 <Typography
@@ -567,21 +631,36 @@ export default function StartPageSettings() {
                 >
                   Логотип
                 </Typography>
+                {logoUploding ? (
+                  <Skeleton
+                    sx={{
+                      width: "300px",
+                      height: "120px",
+                      transform: "none",
+                    }}
+                  />
+                ) : (
                   <DropZone
-                  value={"5 MB максимум"}
+                    text={"5 MB максимум"}
                     sx={{ maxWidth: "300px" }}
                     imageUrl={quiz.config.startpage.logo}
                     originalImageUrl={quiz.config.startpage.originalLogo}
-                  onImageUploadClick={(file) => {
+                    onImageUploadClick={async (file) => {
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
+                      setLogoUploading(true);
+                      await uploadQuizImage(quiz.id, file, (quiz, url) => {
                         quiz.config.startpage.logo = url;
                         quiz.config.startpage.originalLogo = url;
                       });
+
+                      setLogoUploading(false);
                     }}
-                  onImageSaveClick={(file) => {
+                    onImageSaveClick={async (file) => {
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
+                      setLogoUploading(true);
+                      await uploadQuizImage(quiz.id, file, (quiz, url) => {
                         quiz.config.startpage.logo = url;
                       });
+
+                      setLogoUploading(false);
                     }}
                     onDeleteClick={() => {
                       updateQuiz(quiz.id, (quiz) => {
@@ -589,6 +668,7 @@ export default function StartPageSettings() {
                       });
                     }}
                   />
+                )}
               </Box>
 
               <Typography

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -41,7 +41,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
   async function handleImageUpload(file: File) {
     setPictureUploading(true);
 
-    try {
     const url = await uploadQuestionImage(
       resultData.id,
       quizQid,
@@ -53,7 +52,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
     );
     closeImageUploadModal();
     openCropModal(file, url);
-    } catch {}
 
     setPictureUploading(false);
   }