feat: replace progress bar with loading spinner (#1192)

Author: KristinAoki

src/files-and-videos/videos-page/data/thunks.js

@@ -54,7 +54,7 @@ export function cancelAllUploads(courseId, uploadData) {
         control.abort();
       });
       Object.entries(uploadData).forEach(([key, value]) => {
-        if (value.status === RequestStatus.PENDING) {
+        if (value.status === RequestStatus.IN_PROGRESS) {
           updateVideoUploadStatus(
             courseId,
             key,
@@ -324,7 +324,7 @@ export function addVideoFile(
 
       if (uploadUrl && edxVideoId) {
         uploadingIdsRef.current.uploadData = newUploadData({
-          status: RequestStatus.PENDING,
+          status: RequestStatus.IN_PROGRESS,
           currentData: uploadingIdsRef.current.uploadData,
           originalValue: { name, progress },
           key: `video_${idx}`,

src/files-and-videos/videos-page/messages.js

@@ -68,7 +68,7 @@ const messages = defineMessages({
   },
   videoUploadTrackerAlertEditMessage: {
     id: 'course-authoring.files-and-videos.video-upload-tracker-alert.edit.message',
-    defaultMessage: 'Want to coninue editing in Studio during this upload?',
+    defaultMessage: 'Want to continue editing in Studio during this upload?',
     description: 'Continue editing message for the Upload Tracker Alert',
   },
   videoUploadTrackerAlertEditHyperlinkLabel: {

src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx

@@ -1,9 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ProgressBar, Stack, Truncate } from '@openedx/paragon';
+import { Stack, Truncate } from '@openedx/paragon';
 import UploadStatusIcon from './UploadStatusIcon';
 import { RequestStatus } from '../../../data/constants';
 
+const getVideoStatus = (status) => {
+  switch (status) {
+    case RequestStatus.IN_PROGRESS:
+      return 'UPLOADING';
+    case RequestStatus.PENDING:
+      return 'QUEUED';
+    case RequestStatus.SUCCESSFUL:
+      return '';
+    default:
+      return status.toUpperCase();
+  }
+};
+
 const UploadProgressList = ({ videosList }) => (
   <div role="list" className="text-primary-500">
     {videosList.map(([id, video], index) => {
@@ -17,13 +30,9 @@ const UploadProgressList = ({ videosList }) => (
             </Truncate>
           </div>
           <div className="col-6 p-0">
-            {video.status === RequestStatus.FAILED ? (
-              <span className="row m-0 justify-content-end font-weight-bold">
-                {video.status.toUpperCase()}
-              </span>
-            ) : (
-              <ProgressBar now={video.progress} variant="info" />
-            )}
+            <span className="row m-0 justify-content-end font-weight-bold">
+              {getVideoStatus(video.status)}
+            </span>
           </div>
           <UploadStatusIcon status={video.status} />
         </Stack>

src/files-and-videos/videos-page/upload-modal/UploadStatusIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '@openedx/paragon';
+import { Icon, Spinner } from '@openedx/paragon';
 import { Check, ErrorOutline } from '@openedx/paragon/icons';
 import { RequestStatus } from '../../../data/constants';
 
@@ -10,6 +10,14 @@ const UploadStatusIcon = ({ status }) => {
       return (<Icon src={Check} />);
     case RequestStatus.FAILED:
       return (<Icon src={ErrorOutline} />);
+    case RequestStatus.IN_PROGRESS:
+      return (
+        <Spinner
+          animation="border"
+          size="sm"
+          screenReaderText="Loading"
+        />
+      );
     default:
       return (<div style={{ width: '24px' }} />);
   }