fix(app-builder): horizontal scroll after code update

Signed-off-by: Petr Kadlec <[email protected]>
i-am-bee · Jan 22, 2025 · 99b4b93 · 99b4b93
1 parent 357af33
commit 99b4b93
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx b/src/components/EditableSyntaxHighlighter/EditableSyntaxHighlighter.tsx
@@ -222,18 +222,17 @@ export function EditableSyntaxHighlighter({
           {value.at(-1) === '\n' ? `${value} ` : value}
         </SyntaxHighlighter>
 
-        {!readOnly && (
-          <textarea
-            {...props}
-            ref={textAreaRef}
-            id={id}
-            className={classes.textarea}
-            value={value}
-            onChange={(event) => onChange?.(event.target.value)}
-            spellCheck="false"
-            aria-invalid={invalid || undefined}
-          />
-        )}
+        <textarea
+          {...props}
+          ref={textAreaRef}
+          id={id}
+          className={classes.textarea}
+          value={value}
+          onChange={(event) => onChange?.(event.target.value)}
+          spellCheck="false"
+          readOnly={readOnly}
+          aria-invalid={invalid || undefined}
+        />
 
         {invalid && <WarningFilled className={classes.invalidIcon} />}
       </div>

diff --git a/src/modules/apps/builder/ArtifactSharedIframe.module.scss b/src/modules/apps/builder/ArtifactSharedIframe.module.scss
@@ -30,8 +30,9 @@ $loading-size: rem(170px);
 .loading {
   position: absolute;
   inset: 0;
-  &.empty {
-    background-color: $layer-02;
+  background-color: $layer-02;
+  &.isAppReady {
+    background-color: transparent;
   }
 
   :global(.#{$prefix}--loading-overlay) {

diff --git a/src/modules/apps/builder/ArtifactSharedIframe.tsx b/src/modules/apps/builder/ArtifactSharedIframe.tsx
@@ -172,7 +172,8 @@ export function ArtifactSharedIframe({
         (state === State.LOADING || isPending) && (
           <div
             className={clsx(classes.loading, {
-              [classes.empty]: !appliedCodeRef.current,
+              [classes.isAppReady]:
+                appliedCodeRef.current && state === State.READY,
             })}
           >
             <Loading />