Repository: kestra-io/kestra
Issue: Blueprint cause issues in Editor
Labels: bug
enhancement
frontend

### Expected Behavior

_No response_

### Actual Behaviour

There are different cases:

- sometimes the UI raise 503 errors (probably the API is down)
- I got the following screen while accessing the editor view (while topology, exeuction and other Flow view were working)

![image](https://github.com/kestra-io/kestra/assets/46634684/27d65300-eec4-444b-a26d-0fdf4d48bfcb)

[Slack thread for reference](https://kestra-io.slack.com/archives/C04HTFM3VL6/p1690983912027399)


### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version:
- Operating System (OS / Docker / Kubernetes):
- Java Version (If not docker):


### Example flow

_No response_

Issue comments:
Tried to reproduce even with the 503 thing I couldn't manage to do it
The issue is that blueprints are loaded in the editor even if the blueprint tab is not displayed.
This will also creates un-needed API calls that will overload the blueprint API.

@brian-mulier-p we should load blueprint only if the tab is selected in the editor, not always!

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index 90db63297b..46216aa210 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -135,6 +135,7 @@
     const taskError = ref(store.getters["flow/taskError"])
     const user = store.getters["auth/user"];
     const routeParams = router.currentRoute.value.params;
+    const blueprintsLoaded = ref(false);
 
     const persistViewType = (value) => {
         viewType.value = value;
@@ -442,7 +443,7 @@
         timer.value = setTimeout(() => onEdit(event), 500)
     }
 
-    const switchView = (event) => {
+    const switchViewType = (event) => {
         persistViewType(event);
         if (["topology", "source-topology"].includes(viewType.value)) {
             isHorizontal.value = isHorizontalDefault();
@@ -621,7 +622,7 @@
             </template>
         </editor>
         <div class="slider" @mousedown="dragEditor" v-if="combinedEditor" />
-        <Blueprints :class="{'d-none': viewType !== 'source-blueprints'}" embed class="combined-right-view enhance-readability" :top-navbar="false" prevent-route-info />
+        <Blueprints v-if="(viewType === 'source-blueprints' && (blueprintsLoaded = true)) || blueprintsLoaded" :class="{'d-none': viewType !== 'source-blueprints'}" embed class="combined-right-view enhance-readability" :top-navbar="false" prevent-route-info />
         <div
             :class="viewType === 'source-topology' ? 'combined-right-view' : viewType === 'topology' ? 'vueflow': 'hide-view'"
         >
@@ -721,11 +722,11 @@
                 </el-button>
             </template>
         </el-drawer>
-        <SwitchView
+        <switch-view
             v-if="!isReadOnly"
             :type="viewType"
             class="to-topology-button"
-            @switch-view="switchView"
+            @switch-view="switchViewType"
         />
     </el-card>
     <bottom-line v-if="!graphOnly">


Test patch: