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

… Knockout

src/defaultV2-theme/blocks/sd-element.scss

@@ -60,7 +60,7 @@
     white-space: normal;
 
     &::before {
-      content: "\200B";
+      content: "";
     }
   }
 }

src/defaultV2-theme/blocks/sd-loading-indicator.scss

@@ -0,0 +1,22 @@
+@keyframes rotationAnimation {
+  from {
+    rotate: 0deg;
+  }
+
+  to {
+    rotate: 360deg;
+  }
+}
+
+.sd-loading-indicator {
+  height: calcSize(6);
+
+  .sv-svg-icon {
+    height: calcSize(6);
+    width: calcSize(6);
+    animation-name: rotationAnimation;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-duration: 1s;
+  }
+}

src/defaultV2-theme/defaultV2.fontless.scss

@@ -45,6 +45,7 @@
 @import "blocks/sd-progress-toc.scss";
 @import "blocks/sd-list.scss";
 @import "blocks/sd-timer.scss";
+@import "blocks/sd-loading-indicator.scss";
 @import "../components-container.scss";
 @import "../signaturepad.scss";
 @import "./defaultV2.m600.scss";

src/entries/knockout-ui-model.ts

@@ -78,6 +78,7 @@ export { SurveyNavigationButton } from "../knockout/components/survey-actions/su
 export * from "../knockout/components/paneldynamic-actions/paneldynamic-actions";
 export * from "../knockout/components/brand-info/brand-info";
 export * from "../knockout/components/notifier/notifier";
+export * from "../knockout/components/loading-indicator/loading-indicator";
 
 import * as ko from "knockout";
 import { SurveyModel } from "survey-core";

src/knockout/components/loading-indicator/loading-indicator.html

@@ -0,0 +1,4 @@
+<div class="sd-loading-indicator">
+  <!-- ko component: { name: "sv-svg-icon", params: { iconName: 'icon-loading', size: 'auto' }  } -->
+  <!-- /ko -->
+</div>

src/knockout/components/loading-indicator/loading-indicator.ts

@@ -0,0 +1,14 @@
+import * as ko from "knockout";
+const template = require("./loading-indicator.html");
+
+export var LoadingIndicatorViewModel: any;
+
+ko.components.register("sv-loading-indicator", {
+  viewModel: {
+    createViewModel: (
+      params: any,
+      componentInfo: any
+    ) => {}
+  },
+  template: template
+});

src/knockout/templates/question-file.html

@@ -8,6 +8,11 @@
       <!-- /ko -->
       <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     
         <div data-bind="css: question.getFileDecoratorCss()">
+          <!-- ko if: question.isUploading -->
+          <!-- ko component: { name: "sv-loading-indicator" } -->
+          <!-- /ko -->
+          <!-- /ko -->
+          <!-- ko ifnot: question.isUploading -->
           <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.renderedPlaceholder"></span>
           <div data-bind="css: question.cssClasses.wrapper">
             <!-- ko ifnot: isReadOnly -->
@@ -22,6 +27,7 @@
             <span data-bind="css: question.cssClasses.noFileChosen, text: question.noFileChosenCaption"></span>
             <!-- /ko -->
           </div>
+          <!-- /ko -->
         </div>
         <!-- ko template: { name: 'survey-question-file-clean-button', data: {question: question, showRemoveButton: question.showRemoveButton} } --><!-- /ko -->
         <!-- ko if: question.showPreview -->

src/question_file.ts

@@ -17,7 +17,7 @@ import { Helpers } from "./helpers";
  * [View Demo](https://surveyjs.io/form-library/examples/file-upload/ (linkStyle))
  */
 export class QuestionFileModel extends Question {
-  private isUploading: boolean = false;
+  @property() public isUploading: boolean = false;
   @property() isDragging: boolean = false;
   /**
    * An event that is raised after the upload state has changed.