From 0eb56039008883ebf2229dd663b2e0f713777df8 Mon Sep 17 00:00:00 2001
From: Jiho Lee <optional.int@kakao.com>
Date: Wed, 16 Nov 2022 11:35:36 +0900
Subject: [PATCH 1/2] feat: show linear progress bar when model upload

---
 src/pages/models/create-update-base.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/models/create-update-base.tsx b/src/pages/models/create-update-base.tsx
index f8a0580..f551317 100644
--- a/src/pages/models/create-update-base.tsx
+++ b/src/pages/models/create-update-base.tsx
@@ -10,6 +10,7 @@ import {
     RadioGroup,
     FormControlLabel,
     Radio,
+    LinearProgress,
 } from '@mui/material';
 import { useAtom } from 'jotai';
 import { ReactNode, useRef, useState } from 'react';
@@ -38,6 +39,7 @@ const CreateUpdateModelBase: React.FC<ICreateUpdateBaseParams> = ({
     const [library, setLibrary] = useState<string>('tensorflow');
     const [file, setFile] = useState<File | null>(null);
     const [deviceType, setDeviceType] = useState<ModelType>('cpu');
+    const [isUploading, setIsUploading] = useState(false);
 
     const modelNameRef = useRef<HTMLInputElement>(null);
     const inputShapeRef = useRef<HTMLInputElement>(null);
@@ -110,6 +112,8 @@ const CreateUpdateModelBase: React.FC<ICreateUpdateBaseParams> = ({
 
         const submitMode = type === 'create' ? 'post' : 'put';
 
+        setIsUploading(true);
+
         const data = await createModelOrAddModelMetadata(
             {
                 name: items['모델 이름'] ?? '',
@@ -265,6 +269,7 @@ const CreateUpdateModelBase: React.FC<ICreateUpdateBaseParams> = ({
                         ))}
                     </Select>
                 </FormControl>
+                {isUploading && <LinearProgress color="primary" />}
             </div>
         </ActionCard>
     );

From 22255fabe94665bdea211a2b84ec8c8be404da10 Mon Sep 17 00:00:00 2001
From: NEM-NE <dlatqdlatq@mju.ac.kr>
Date: Wed, 16 Nov 2022 14:22:29 +0900
Subject: [PATCH 2/2] feat: show linear progress bar when deployment upload

---
 src/pages/deployments/create-update-base.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/deployments/create-update-base.tsx b/src/pages/deployments/create-update-base.tsx
index 5af43e3..ef4d684 100644
--- a/src/pages/deployments/create-update-base.tsx
+++ b/src/pages/deployments/create-update-base.tsx
@@ -10,6 +10,7 @@ import {
     FormControlLabel,
     Radio,
     Slider,
+    LinearProgress,
 } from '@mui/material';
 import { pipe } from 'fp-ts/lib/function';
 import { useAtom } from 'jotai';
@@ -57,6 +58,7 @@ const CreateUpdateDeploymentBase: React.FC<ICreateUpdateBaseParams> = ({
     const standardValueRef = useRef<HTMLInputElement>(null);
     const [replicaRange, setReplicaRange] = useState<number[]>([1, 4]);
     const [radioValue, setRadioValue] = useState<ScalingToggleMode>('REPLICAS');
+    const [isUploading, setIsUploading] = useState(false);
 
     const handleChangeModel = (
         event: SelectChangeEvent<number>,
@@ -133,6 +135,8 @@ const CreateUpdateDeploymentBase: React.FC<ICreateUpdateBaseParams> = ({
             maxReplicas: replicaRange[1],
         };
 
+        setIsUploading(true);
+
         const data = await createDeploymentOrPut(
             {
                 name: itemsWithValues['Deployment Name'] as string,
@@ -405,6 +409,7 @@ const CreateUpdateDeploymentBase: React.FC<ICreateUpdateBaseParams> = ({
                     />
                 )}
             </div>
+            {isUploading && <LinearProgress color="primary" />}
         </ActionCard>
     );
 };