Add a loading state to the FileItem component in the ResponsePreview panel with corresponding styles and spinner icon

Author: robertpiosik

packages/ui/src/components/editor/panel/ResponsePreview/components/FileItem/FileItem.module.scss

@@ -171,6 +171,11 @@
     }
   }
 
+  &--loading {
+    color: var(--cwc-text-color);
+    background-color: var(--cwc-bg-tertiary);
+  }
+
   &__content {
     flex: 1;
     overflow: hidden;
@@ -180,9 +185,9 @@
     padding: 3px 0 3px 6px;
 
     > span:first-child {
-      font-size: 13px !important;
+      font-size: 14px !important;
       margin-right: 4px;
-      transform: translateY(2px);
+      vertical-align: middle;
     }
   }
 

packages/ui/src/components/editor/panel/ResponsePreview/components/FileItem/FileItem.tsx

@@ -23,9 +23,16 @@ type FileMessage =
   | { type: 'success'; text: string; show_actions?: boolean }
   | { type: 'error'; text: string; show_actions: boolean }
   | { type: 'warning'; text: string; show_actions: boolean }
+  | { type: 'loading'; text: string; show_actions?: boolean }
 
 const get_file_message = (file: FileInPreview): FileMessage | null => {
-  if (file.applied_with_intelligent_update) {
+  if (file.is_applying) {
+    return {
+      type: 'loading',
+      text: 'Applying...',
+      show_actions: false
+    }
+  } else if (file.applied_with_intelligent_update) {
     return {
       type: 'success',
       text: 'Applied with Intelligent Update',
@@ -224,7 +231,8 @@ export const FileItem: FC<Props> = (props) => {
           className={cn(styles.message, {
             [styles['message--error']]: message_obj.type == 'error',
             [styles['message--warning']]: message_obj.type == 'warning',
-            [styles['message--success']]: message_obj.type == 'success'
+            [styles['message--success']]: message_obj.type == 'success',
+            [styles['message--loading']]: message_obj.type == 'loading'
           })}
         >
           <div className={styles['message__content']}>
@@ -237,6 +245,9 @@ export const FileItem: FC<Props> = (props) => {
             {message_obj.type == 'warning' && (
               <span className="codicon codicon-warning" />
             )}
+            {message_obj.type == 'loading' && (
+              <span className="codicon codicon-loading codicon-modifier-spin" />
+            )}
             <span>{message_obj.text}</span>
           </div>
           {'show_actions' in message_obj && message_obj.show_actions && (