support internationalization on the client side

Author: sumn2u

client/src/ImageUpload/index.jsx

@@ -133,17 +133,24 @@ const ImageUpload = ({ onImageUpload }) => {
         {isDragActive ? (
           <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>{t("configuration.image_upload.file_drop")}</Typography>
         ) : (
-          loading ?
-            progress > 0 && progress < 100 ? (
-              <div>
-                <progress value={progress} max={100} />
-                <p>{progress}%</p>
-              </div>
-            ) : (
-              <div className="loading">Loading...</div>
-            )
-            :
-            <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>{t("configuration.image_upload.description")}</Typography>
+          <>
+          {loading ? (
+            <>
+              {progress > 0 && progress < 100 ? (
+                <>
+                  <progress value={progress} max={100} />
+                  <p>{progress}%</p>
+                </>
+              ) : (
+                <div className="loading">{t("loading")}</div>
+              )}
+            </>
+          ) : (
+            <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>
+              {t("configuration.image_upload.description")}
+            </Typography>
+          )}
+        </>
         )}
       </Box>
       <Box display="flex" flexWrap="wrap" gap="1rem">

client/src/Localization/translation-en-EN.js

@@ -59,7 +59,8 @@ const translationEnEN = {
   "helptext_circle": "Add Circle",
   "comment_placeholder": "Write comment here...",
   "image_tags": "Image Tags",
-  "image_tags_classification_placeholder": "Image Classification"
+  "image_tags_classification_placeholder": "Image Classification",
+  "loading": "Loading...",
 };
 
 export default translationEnEN;