diff --git a/packages/frontend/src/components/task/TaskRecording.component.tsx b/packages/frontend/src/components/task/TaskRecording.component.tsx index 131b9ad..af56874 100644 --- a/packages/frontend/src/components/task/TaskRecording.component.tsx +++ b/packages/frontend/src/components/task/TaskRecording.component.tsx @@ -1,5 +1,5 @@ -import { Grid } from '@mui/material'; -import { FC } from 'react'; +import { CircularProgress, Grid, Stack, Typography } from '@mui/material'; +import { FC, useState } from 'react'; import { VideoRecord } from '../VideoRecord.component'; import { TaskInstructionsSide } from './TaskInstructionsSide.component'; import { @@ -19,6 +19,7 @@ export interface TaskRecordingProps { export const TaskRecording: FC = ({ task }) => { const navigate = useNavigate(); const { user } = useUser(); + const [loading, setIsLoading] = useState(false); const handleVideoComplete = async (_blobURL: string, blob: Blob) => { // Get link to upload the video @@ -68,11 +69,18 @@ export const TaskRecording: FC = ({ task }) => { return ( - handleVideoComplete(blobURL, blob)} - timeLimit={task.timeSeconds} - /> + {loading ? ( + + ) : ( + { + setIsLoading(true); + handleVideoComplete(blobURL, blob); + }} + timeLimit={task.timeSeconds} + /> + )} @@ -80,3 +88,12 @@ export const TaskRecording: FC = ({ task }) => { ); }; + +const UploadingLoader: FC = () => { + return ( + + Uploading, do not refresh + + + ); +};