Work for surveyjs/survey-creator#4435: implement loading indicator in…

… React

src/entries/react-ui-model.ts

@@ -100,6 +100,7 @@ export { CharacterCounterComponent } from "../react/components/character-counter
 
 export { SurveyLocStringViewer } from "../react/string-viewer";
 export { SurveyLocStringEditor } from "../react/string-editor";
+export { LoadingIndicatorComponent } from "../react/components/loading-indicator";
 
 //Uncomment to include the "date" question type.
 //export {default as SurveyQuestionDate} from "../plugins/react/reactquestiondate";

src/react/components/loading-indicator.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { SvgIcon } from "./svg-icon/svg-icon";
+
+export class LoadingIndicatorComponent extends React.Component<any, any> {
+  render(): JSX.Element | null {
+    return (<div className="sd-loading-indicator"><SvgIcon iconName="icon-loading" size="auto"></SvgIcon></div>);
+  }
+}

src/react/reactquestion_file.tsx

@@ -5,6 +5,7 @@ import { SvgIcon } from "./components/svg-icon/svg-icon";
 import { SurveyQuestionElementBase } from "./reactquestion_element";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { attachKey2click } from "./reactSurvey";
+import { LoadingIndicatorComponent } from "./components/loading-indicator";
 
 export class SurveyQuestionFile extends SurveyQuestionElementBase {
   constructor(props: any) {
@@ -13,6 +14,9 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
   protected get question(): QuestionFileModel {
     return this.questionBase as QuestionFileModel;
   }
+  protected renderLoadingIndicator(): JSX.Element {
+    return <LoadingIndicatorComponent></LoadingIndicatorComponent>;
+  }
   protected renderElement(): JSX.Element {
     var preview = this.renderPreview();
     var fileInput: JSX.Element | null = null;
@@ -79,7 +83,16 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     );
   }
   protected renderFileDecorator(): JSX.Element {
-    const questionCss = this.question.cssClasses;
+    const content = this.question.isUploading ? this.renderLoadingIndicator() : this.renderButtons();
+    return (
+      <div
+        className={this.question.getFileDecoratorCss()}
+      >
+        {content}
+      </div>
+    );
+  }
+  protected renderButtons(): JSX.Element {
     let noFileChosen: JSX.Element | null = null;
     let chooseFile: JSX.Element | null = null;
     chooseFile = this.question.isReadOnly ? null : attachKey2click(
@@ -102,19 +115,16 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       );
     }
     return (
-      <div
-        className={this.question.getFileDecoratorCss()}
-      >
+      <>
         <span className={this.question.cssClasses.dragAreaPlaceholder}>{this.question.renderedPlaceholder}</span>
         <div className={this.question.cssClasses.wrapper}>
           {chooseFile}
           {noFileChosen}
         </div>
-      </div>
-    );
+      </>);
   }
   protected renderClearButton(className: string): JSX.Element | null {
-    return className ? (
+    return className && !this.question.isUploading ? (
       <button type="button" onClick={this.question.doClean} className={className}>
         <span>{this.question.clearButtonCaption}</span>
         {(!!this.question.cssClasses.removeButtonIconId) ? <SvgIcon iconName={this.question.cssClasses.removeButtonIconId} size={"auto"} title={this.question.clearButtonCaption}></SvgIcon>: null }
@@ -140,7 +150,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     );
   }
   protected renderPreview(): JSX.Element | null {
-    if (!this.question.previewValue || !this.question.previewValue.length) return null;
+    if (!this.question.previewValue || !this.question.previewValue.length || this.question.isUploading) return null;
     var previews = this.question.previewValue.map((val, index) => {
       if (!val) return null;
       return (