Fix duplicate scene loading bug (#1826)

GladysAssistant · Jun 30, 2023 · ec0eed7 · ec0eed7
1 parent 3101949
commit ec0eed7
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 67 deletions.
diff --git a/front/src/routes/scene/duplicate-scene/DuplicateScenePage.jsx b/front/src/routes/scene/duplicate-scene/DuplicateScenePage.jsx
@@ -14,77 +14,83 @@ const DuplicateScenePage = ({ children, ...props }) => (
     <div class="row">
       <div class="col col-login mx-auto">
         <form onSubmit={props.duplicateScene} class="card">
-          <div class="card-body p-6">
-            <div class="card-title">
-              <Text id="duplicateScene.cardTitle" fields={{ name: props.sourceScene.name }} />
-            </div>
-            {props.duplicateSceneStatus === RequestStatus.ConflictError && (
-              <div class="alert alert-danger">
-                <Text id="duplicateScene.sceneAlreadyExist" />
-              </div>
-            )}
-            <div class="form-group">
-              <label class="form-label">
-                <Text id="duplicateScene.nameLabel" />
-              </label>
-              <Localizer>
-                <input
-                  type="text"
-                  class={cx('form-control', {
-                    'is-invalid': get(props, 'duplicateSceneErrors.name')
-                  })}
-                  placeholder={<Text id="duplicateScene.namePlaceholder" />}
-                  value={get(props, 'scene.name')}
-                  onInput={props.updateDuplicateSceneName}
-                />
-              </Localizer>
-              <div class="invalid-feedback">
-                <Text id="duplicateScene.invalidName" />
-              </div>
-            </div>
-
-            <div className="form-group">
-              <label className="form-label">
-                <Text id="duplicateScene.iconLabel" />
-              </label>
-              {get(props, 'duplicateSceneErrors.icon') && (
-                <div className="alert alert-danger">
-                  <Text id="duplicateScene.invalidIcon" />
+          <div class={props.loading ? 'dimmer active' : 'dimmer'}>
+            <div class="loader" />
+            <div class="card-body p-6">
+              <div class="dimmer-content">
+                <div class="card-title">
+                  <Text id="duplicateScene.cardTitle" fields={{ name: props.sourceScene.name }} />
                 </div>
-              )}
-              <div className={cx('row', style.iconContainer)}>
-                {iconList.map(icon => (
-                  <div className="col-2">
-                    <div
-                      className={cx('text-center', style.iconDiv, {
-                        [style.iconDivChecked]: get(props, 'scene.icon') === icon
+                {props.duplicateSceneStatus === RequestStatus.ConflictError && (
+                  <div class="alert alert-danger">
+                    <Text id="duplicateScene.sceneAlreadyExist" />
+                  </div>
+                )}
+                <div class="form-group">
+                  <label class="form-label">
+                    <Text id="duplicateScene.nameLabel" />
+                  </label>
+                  <Localizer>
+                    <input
+                      type="text"
+                      class={cx('form-control', {
+                        'is-invalid': get(props, 'duplicateSceneErrors.name')
                       })}
-                    >
-                      <label className={style.iconLabel}>
-                        <input
-                          name="icon"
-                          type="radio"
-                          onChange={props.updateDuplicateSceneIcon}
-                          checked={get(props, 'scene.icon') === icon}
-                          value={icon}
-                          className={style.iconInput}
-                        />
-                        <i className={`fe fe-${icon}`} />
-                      </label>
+                      disabled={props.loading}
+                      placeholder={<Text id="duplicateScene.namePlaceholder" />}
+                      value={get(props, 'scene.name')}
+                      onInput={props.updateDuplicateSceneName}
+                    />
+                  </Localizer>
+                  <div class="invalid-feedback">
+                    <Text id="duplicateScene.invalidName" />
+                  </div>
+                </div>
+
+                <div className="form-group">
+                  <label className="form-label">
+                    <Text id="duplicateScene.iconLabel" />
+                  </label>
+                  {get(props, 'duplicateSceneErrors.icon') && (
+                    <div className="alert alert-danger">
+                      <Text id="duplicateScene.invalidIcon" />
                     </div>
+                  )}
+                  <div className={cx('row', style.iconContainer)}>
+                    {iconList.map(icon => (
+                      <div className="col-2">
+                        <div
+                          className={cx('text-center', style.iconDiv, {
+                            [style.iconDivChecked]: get(props, 'scene.icon') === icon
+                          })}
+                        >
+                          <label className={style.iconLabel}>
+                            <input
+                              name="icon"
+                              type="radio"
+                              onChange={props.updateDuplicateSceneIcon}
+                              checked={get(props, 'scene.icon') === icon}
+                              value={icon}
+                              className={style.iconInput}
+                            />
+                            <i className={`fe fe-${icon}`} />
+                          </label>
+                        </div>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                </div>
+                <div class="form-footer">
+                  <button
+                    onClick={props.duplicateScene}
+                    class="btn btn-primary btn-block"
+                    disabled={props.duplicateSceneStatus === RequestStatus.Getting}
+                  >
+                    <Text id="duplicateScene.duplicateSceneButton" />
+                  </button>
+                </div>
               </div>
             </div>
-            <div class="form-footer">
-              <button
-                onClick={props.duplicateScene}
-                class="btn btn-primary btn-block"
-                disabled={props.duplicateSceneStatus === RequestStatus.Getting}
-              >
-                <Text id="duplicateScene.duplicateSceneButton" />
-              </button>
-            </div>
           </div>
         </form>
       </div>

diff --git a/front/src/routes/scene/duplicate-scene/index.js b/front/src/routes/scene/duplicate-scene/index.js
@@ -14,6 +14,7 @@ class DuplicateScene extends Component {
     const scene = await this.props.httpClient.get(`/api/v1/scene/${this.props.scene_selector}`);
     this.setState({
       sourceScene: scene,
+      loading: false,
       scene: {
         name: '',
         icon: scene.icon
@@ -93,7 +94,6 @@ class DuplicateScene extends Component {
 
   constructor(props) {
     super(props);
-    this.getSourceScene();
     this.state = {
       scene: {
         name: '',
@@ -103,17 +103,23 @@ class DuplicateScene extends Component {
         name: '',
         icon: ''
       },
+      loading: true,
       duplicateSceneErrors: null,
       duplicateSceneStatus: null
     };
   }
 
-  render(props, { duplicateSceneErrors, scene, duplicateSceneStatus, sourceScene }) {
+  componentDidMount() {
+    this.getSourceScene();
+  }
+
+  render(props, { duplicateSceneErrors, scene, duplicateSceneStatus, sourceScene, loading }) {
     return (
       <DuplicateScenePage
         {...props}
         goBack={this.goBack}
         scene={scene}
+        loading={loading}
         sourceScene={sourceScene}
         updateDuplicateSceneName={this.updateDuplicateSceneName}
         updateDuplicateSceneIcon={this.updateDuplicateSceneIcon}