Don't render ActionBarView during loading (#4612)

* don't render ActionBarView during loading (fixes #4597 and contributes to #4572)

* only show full navbar when model loading was successful

* update changelog

Author: philippotto

CHANGELOG.unreleased.md

@@ -15,7 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 -
 
 ### Changed
-
+- Improved the UI in navigation bar during loading of tracings and datasets. [#4612](https://github.com/scalableminds/webknossos/pull/4612)
 - Improved logging in case of very slow annotation saving. Additionally, the user is also warned when there are unsaved changes older than two minutes. [#4593](https://github.com/scalableminds/webknossos/pull/4593)
 
 ### Fixed

frontend/javascripts/oxalis/controller.js

@@ -43,10 +43,12 @@ import constants, { ControlModeEnum, type ViewMode } from "oxalis/constants";
 import messages from "messages";
 import window, { document } from "libs/window";
 
-type ControllerStatus = "loading" | "loaded" | "failedLoading";
+export type ControllerStatus = "loading" | "loaded" | "failedLoading";
 type OwnProps = {|
   initialAnnotationType: AnnotationType,
   initialCommandType: TraceOrViewCommand,
+  controllerStatus: ControllerStatus,
+  setControllerStatus: ControllerStatus => void,
 |};
 type StateProps = {|
   viewMode: ViewMode,
@@ -55,19 +57,13 @@ type StateProps = {|
 type Props = {| ...OwnProps, ...StateProps |};
 type PropsWithRouter = {| ...Props, history: RouterHistory |};
 
-type State = {
-  status: ControllerStatus,
-};
+type State = {};
 
 class Controller extends React.PureComponent<PropsWithRouter, State> {
   keyboard: InputKeyboard;
   keyboardNoLoop: InputKeyboardNoLoop;
   isMounted: boolean;
 
-  state = {
-    status: "loading",
-  };
-
   // Main controller, responsible for setting modes and everything
   // that has to be controlled in any mode.
   //
@@ -104,14 +100,14 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
   }
 
   tryFetchingModel() {
-    this.setState({ status: "loading" });
+    this.props.setControllerStatus("loading");
     // Preview a working annotation version if the showVersionRestore URL parameter is supplied
     const versions = Utils.hasUrlParam("showVersionRestore") ? { skeleton: 1 } : undefined;
 
     Model.fetch(this.props.initialAnnotationType, this.props.initialCommandType, true, versions)
       .then(() => this.modelFetchDone())
       .catch(error => {
-        this.setState({ status: "failedLoading" });
+        this.props.setControllerStatus("failedLoading");
         // Don't throw errors for errors already handled by the model.
         if (error !== HANDLED_ERROR) {
           throw error;
@@ -159,7 +155,7 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
       // Give wk (sagas and bucket loading) a bit time to catch air before
       // showing the UI as "ready". The goal here is to avoid that the
       // UI is still freezing after the loading indicator is gone.
-      this.setState({ status: "loaded" });
+      this.props.setControllerStatus("loaded");
     }, 200);
   }
 
@@ -277,7 +273,7 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
   }
 
   render() {
-    const { status } = this.state;
+    const status = this.props.controllerStatus;
     const { user, viewMode } = this.props;
     if (status === "loading") {
       return <BrainSpinner />;

frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js

@@ -25,6 +25,7 @@ import MappingInfoView from "oxalis/view/right-menu/mapping_info_view";
 import MeshesView from "oxalis/view/right-menu/meshes_view";
 import NmlUploadZoneContainer from "oxalis/view/nml_upload_zone_container";
 import OxalisController from "oxalis/controller";
+import type { ControllerStatus } from "oxalis/controller";
 import RecordingSwitch from "oxalis/view/recording_switch";
 import SettingsView from "oxalis/view/settings/settings_view";
 import MergerModeController from "oxalis/controller/merger_mode_controller";
@@ -68,6 +69,7 @@ type State = {
   isSettingsCollapsed: boolean,
   activeLayout: string,
   hasError: boolean,
+  status: ControllerStatus,
 };
 
 const canvasAndLayoutContainerID = "canvasAndLayoutContainer";
@@ -108,6 +110,7 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
       isSettingsCollapsed: true,
       activeLayout: lastActiveLayout,
       hasError: false,
+      status: "loading",
     };
   }
 
@@ -190,57 +193,61 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
         <OxalisController
           initialAnnotationType={this.props.initialAnnotationType}
           initialCommandType={this.props.initialCommandType}
+          controllerStatus={this.state.status}
+          setControllerStatus={(status: ControllerStatus) => this.setState({ status })}
         />
         <CrossOriginApi />
         <Layout className="tracing-layout">
           <RenderToPortal portalId="navbarTracingSlot">
-            <div style={{ flex: "0 1 auto", zIndex: 210, display: "flex" }}>
-              <ButtonComponent
-                className={this.state.isSettingsCollapsed ? "" : "highlight-togglable-button"}
-                onClick={this.handleSettingsCollapse}
-                shape="circle"
-              >
-                <Icon
-                  type="setting"
-                  className="withoutMargin"
-                  style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-                />
-              </ButtonComponent>
-              <ActionBarView
-                layoutProps={{
-                  storedLayoutNamesForView: currentLayoutNames,
-                  activeLayout: this.state.activeLayout,
-                  layoutKey: layoutType,
-                  setCurrentLayout: layoutName => {
-                    this.setState({ activeLayout: layoutName });
-                    setActiveLayout(layoutType, layoutName);
-                  },
-                  saveCurrentLayout: this.saveCurrentLayout,
-                  setAutoSaveLayouts: this.props.setAutoSaveLayouts,
-                  autoSaveLayouts: this.props.autoSaveLayouts,
-                }}
-              />
-              {isDatasetOnScratchVolume ? (
-                <Tooltip title={messages["dataset.is_scratch"]}>
-                  <Alert
-                    className="hide-on-small-screen"
-                    style={{
-                      height: 30,
-                      paddingTop: 4,
-                      backgroundColor: "#f17a27",
-                      color: "white",
-                    }}
-                    message={
-                      <span>
-                        Dataset is on tmpscratch!{" "}
-                        <Icon type="warning" theme="filled" style={{ margin: "0 0 0 6px" }} />
-                      </span>
-                    }
-                    type="error"
+            {this.state.status === "loaded" ? (
+              <div style={{ flex: "0 1 auto", zIndex: 210, display: "flex" }}>
+                <ButtonComponent
+                  className={this.state.isSettingsCollapsed ? "" : "highlight-togglable-button"}
+                  onClick={this.handleSettingsCollapse}
+                  shape="circle"
+                >
+                  <Icon
+                    type="setting"
+                    className="withoutMargin"
+                    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
                   />
-                </Tooltip>
-              ) : null}
-            </div>
+                </ButtonComponent>
+                <ActionBarView
+                  layoutProps={{
+                    storedLayoutNamesForView: currentLayoutNames,
+                    activeLayout: this.state.activeLayout,
+                    layoutKey: layoutType,
+                    setCurrentLayout: layoutName => {
+                      this.setState({ activeLayout: layoutName });
+                      setActiveLayout(layoutType, layoutName);
+                    },
+                    saveCurrentLayout: this.saveCurrentLayout,
+                    setAutoSaveLayouts: this.props.setAutoSaveLayouts,
+                    autoSaveLayouts: this.props.autoSaveLayouts,
+                  }}
+                />
+                {isDatasetOnScratchVolume ? (
+                  <Tooltip title={messages["dataset.is_scratch"]}>
+                    <Alert
+                      className="hide-on-small-screen"
+                      style={{
+                        height: 30,
+                        paddingTop: 4,
+                        backgroundColor: "#f17a27",
+                        color: "white",
+                      }}
+                      message={
+                        <span>
+                          Dataset is on tmpscratch!{" "}
+                          <Icon type="warning" theme="filled" style={{ margin: "0 0 0 6px" }} />
+                        </span>
+                      }
+                      type="error"
+                    />
+                  </Tooltip>
+                ) : null}
+              </div>
+            ) : null}
           </RenderToPortal>
           <Layout style={{ display: "flex" }}>
             <Sider

frontend/javascripts/oxalis/view/right-menu/dataset_info_tab_view.js

@@ -287,8 +287,8 @@ class DatasetInfoTabView extends React.PureComponent<Props> {
 
     return (
       <div className="flex-overflow">
-        <p>{annotationTypeLabel}</p>
-        <p>{descriptionEditField}</p>
+        <div>{annotationTypeLabel}</div>
+        <div>{descriptionEditField}</div>
       </div>
     );
   }