improved performance by lazy rendering examples

Author: mrin9

src/components/api-response.js

@@ -114,6 +114,7 @@ export default class ApiResponse extends LitElement {
           true,
           mimeResp.includes('json') ? 'json' : 'text',
         );
+
         allMimeResp[mimeResp] = {
           description: this.responses[statusCode].description,
           examples: respExample,
@@ -165,14 +166,14 @@ export default class ApiResponse extends LitElement {
                     : html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`
                   }
                 </div>
-
-                <div class ='tab-content col' style = 'flex:1; display:${this.activeSchemaTab === 'example' ? 'flex' : 'none'};'>
-                  ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
-                </div>
-                <div class="tab-content col" style="flex:1; display:${this.activeSchemaTab === 'model' ? 'flex' : 'none'};">
-                  ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
-                </div>
-
+                ${this.activeSchemaTab === 'example'
+                  ? html`<div class ='tab-content col' style = 'flex:1;'>
+                      ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
+                    </div>`
+                  : html`<div class ='tab-content col' style = 'flex:1;'>
+                      ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
+                    </div>`
+                }
               </div>
             `
           }`)

src/components/schema-tree.js

@@ -149,7 +149,7 @@ export default class SchemaTree extends LitElement {
             ${data['::type'] === 'xxx-of-option' || prevKey.startsWith('::OPTION')
               ? html`<span class='xxx-of-key'>${newPrevKey}</span>`
               : newPrevKey.endsWith('*')
-                ? html`${newPrevKey.substring(0, newPrevKey.length - 1)}<span style='color:var(--red);margin-left:-6px'>*</span>`
+                ? html`${newPrevKey.substring(0, newPrevKey.length - 1)}<span style='color:var(--red);'>*</span>`
                 : newPrevKey
             }${level > 0 ? ':' : ''}${openBracket}
           </div>