feat(spectral): add loading animation to fetch calls

nginx.conf

@@ -21,6 +21,9 @@
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_read_timeout 300;    # Timeout für das Lesen von Backend
+      proxy_connect_timeout 300;  # Timeout für die Verbindung zum Backend
+      proxy_send_timeout 300;     # Timeout für das Senden an den Client
     }
 
     location $BASE_URL {

package.json

@@ -83,6 +83,7 @@
     "react-dropzone": "^12.0.4",
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "7.2.9",
+    "react-spinners": "=0.14.1",
     "react-split-pane": "^0.1.82",
     "react-transition-group": "^1.1.1",
     "redux": "=4.2.1",

src/plugins/validate-spectral/index.js

@@ -2,6 +2,7 @@
 // after `updateJsonSpec` is dispatched.
 import debounce from "lodash/debounce"
 export const updateJsonSpec = (ori, { specActions }) => (...args) => {
+  console.log("Starting with function", args)
     ori(...args)
 
     const [spec] = args
@@ -31,10 +32,12 @@ let controller = null
 const ABORT_SIGNAL = "new validation request; aborting the current one";
 //eslint-disable-next-line no-unused-vars
 export const validateSpec = (jsSpec) => (arg) => {
+  arg.topbarActions.setSpinnerEnabled(true)
     // This not being null means a request is going on, cancel that
     if (controller != null) {
         controller.abort(ABORT_SIGNAL)
     }
+
     arg.errActions.clear({
         source: SOURCE
     })
@@ -85,7 +88,10 @@ export const validateSpec = (jsSpec) => (arg) => {
             console.error("Error:", error)
         }
         // Always set the controller to null, no matter if the fetch call actually was successful or not
-    }).finally(() => controller = null);
+    }).finally(() => {
+      controller = null
+      arg.topbarActions.setSpinnerEnabled(false)
+    });
 }
 
 export default function() {

src/standalone/styles/main.less

@@ -1,3 +1,4 @@
 @import "topbar-insert-forms.less";
 @import "topbar-modal.less";
-@import "topbar.less";
+@import "topbar.less";
+@import "spinner.less";

src/standalone/styles/spinner.less

@@ -0,0 +1,22 @@
+.spinner-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999; /* Damit der spinner über allem sichtbar ist */
+  display: block; /* Initially hidden */
+}
+
+.spinner {
+  border: 18px solid #f3f3f3;
+  border-top: 18px solid #3498db;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/standalone/topbar/components/Spinner.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { CircleLoader, ClipLoader, PacmanLoader, RotateLoader } from "react-spinners"
+
+function Spinner(props) {
+  const spinnerEnabled = props.currentStateF()
+  return spinnerEnabled ? (
+    //
+    <div className="spinner-container">
+    <ClipLoader color="#36d7b7" loading={true} size={70} />
+    </div>
+  ) : null
+}
+
+
+export default Spinner;

src/standalone/topbar/components/Topbar.jsx

@@ -12,6 +12,7 @@ import SpectralVersion from "./SpectralVersion"
 import Logo from "../assets/logo_small.svg"
 import SpectralErrorsOnly from "./SpectralErrorsOnly"
 import SpectralEnvironment from "./SpectralEnvironment"
+import Spinner from "./Spinner"
 
 export default class Topbar extends React.Component {
   constructor(props, context) {
@@ -396,6 +397,7 @@ export default class Topbar extends React.Component {
             <SpectralEnvironment onChange={topbarActions.switchSpectralEnvironment} currentStateF={topbarSelectors.spectralEnvironment} />
           </div>
         </div>
+        <Spinner onChange={topbarActions.setSpinnerEnabled} currentStateF={topbarSelectors.spinnerEnabled} />
       </div>
     )
   }

src/standalone/topbar/index.js

@@ -35,19 +35,27 @@ export default function() {
               type: "SET_ERRORS_ONLY",
               errorsOnly
             }
+          },
+          setSpinnerEnabled(spinnerEnabled) {
+            return {
+              type: "SET_SPINNER_ENABLED",
+              spinnerEnabled
+            }
           }
         },
         reducers: {
           TOPBAR_SHOW_MODAL: (state, action) => state.setIn(["shownModals", action.target], true),
           TOPBAR_HIDE_MODAL: (state, action) => state.setIn(["shownModals", action.target], false),
           SWITCH_SPECTRAL_VERSION: (state, action) => state.setIn(["spectralVersion"], action.version),
           SWITCH_SPECTRAL_ENVIRONMENT: (state, action) => state.setIn(["spectralEnvironment"], action.environment),
-          SET_ERRORS_ONLY:(state) => state.setIn(["errorsOnly"],!state.getIn(["errorsOnly"],true))
+          SET_ERRORS_ONLY:(state) => state.setIn(["errorsOnly"],!state.getIn(["errorsOnly"],true)),
+          SET_SPINNER_ENABLED:(state) => state.setIn(["spinnerEnabled"],!state.getIn(["spinnerEnabled"],false))
         },
         selectors: {
           showModal: (state, name) => state.getIn(["shownModals", name], false),
           spectralVersion: (state) =>state.getIn(["spectralVersion"], "v10"),
           spectralEnvironment: (state) =>state.getIn(["spectralEnvironment"], "DE"),
+          spinnerEnabled: (state) => state.getIn(["spinnerEnabled"],false),
           errorsOnly: (state) => state.getIn(["errorsOnly"],true)
 
         }