From 36ca13b14b617e7c95622ed7e53d85bdae7b3514 Mon Sep 17 00:00:00 2001
From: Christian Siewert <csiewert@phoenixcontact.com>
Date: Wed, 22 May 2024 12:05:46 +0200
Subject: [PATCH] Prevent hidden config values from being rendered

The contents of `CollectionEditor` and `ClassEditor` shouldn't get rendered
unless they are visible, i.e. expanded.

This prevents the UI from loading for a long time with huge configurations.
---
 .../src/modules/components/ConfigEditor/ClassEditor.tsx  | 9 ++++++---
 .../modules/components/ConfigEditor/CollectionEditor.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/ClassEditor.tsx b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/ClassEditor.tsx
index 2b0f48c2..f74f3c8e 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/ClassEditor.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/ClassEditor.tsx
@@ -30,9 +30,12 @@ export default class ClassEditor extends CollapsibleEntryEditorBase<ClassEditorS
         return (
             <div>
                 <Collapse in={this.props.IsExpanded}>
-                    <Container style={{paddingRight: "0"}}>
-                        {this.preRenderConfigEditor()}
-                    </Container>
+                    {
+                        this.props.IsExpanded &&
+                        <Container style={{paddingRight: "0"}}>
+                            {this.preRenderConfigEditor()}
+                        </Container>
+                    }
                 </Collapse>
             </div>
         );
diff --git a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/CollectionEditor.tsx b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/CollectionEditor.tsx
index afc41038..dc212eca 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/CollectionEditor.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/CollectionEditor.tsx
@@ -128,7 +128,7 @@ export default class CollectionEditor extends CollapsibleEntryEditorBase<Collect
         return (
             <Collapse in={this.props.IsExpanded}>
                 <Grid container={true} item={true} sx={{paddingLeft: 3, paddingRight: 0}}>
-                    {
+                    {   this.props.IsExpanded &&
                         this.props.Entry.subEntries.map((entry, idx) => {
                             if (Entry.isClassOrCollection(entry)) {
                                 return (