only use min height for md and html when loading (#2623)

gradio-app · Nov 9, 2022 · fd31726 · fd31726
1 parent 9ec45f6
commit fd31726
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,8 @@
 No changes to highlight.
 
 ## Bug Fixes:
-No changes to highlight.
-
+* Only set a min height on md and html when loading by [@pngwn](https://github.com/pngwn) in [PR 2623](https://github.com/gradio-app/gradio/pull/2623)
+ 
 ## Documentation Changes:
 * See docs for the latest gradio commit to main as well the latest pip release:
 

diff --git a/ui/packages/app/src/components/HTML/HTML.svelte b/ui/packages/app/src/components/HTML/HTML.svelte
@@ -22,6 +22,12 @@
 		class="transition"
 		class:opacity-20={loading_status?.status === "pending"}
 	>
-		<HTML {value} {elem_id} {visible} on:change />
+		<HTML
+			min_height={loading_status && loading_status?.status !== "complete"}
+			{value}
+			{elem_id}
+			{visible}
+			on:change
+		/>
 	</div>
 </Block>
diff --git a/ui/packages/app/src/components/Markdown/Markdown.svelte b/ui/packages/app/src/components/Markdown/Markdown.svelte
@@ -22,6 +22,12 @@
 		class="transition"
 		class:opacity-20={loading_status?.status === "pending"}
 	>
-		<Markdown {value} {elem_id} {visible} on:change />
+		<Markdown
+			min_height={loading_status && loading_status.status !== "complete"}
+			{value}
+			{elem_id}
+			{visible}
+			on:change
+		/>
 	</div>
 </Block>
diff --git a/ui/packages/html/src/HTML.svelte b/ui/packages/html/src/HTML.svelte
@@ -4,12 +4,18 @@
 	export let elem_id: string = "";
 	export let value: string;
 	export let visible: boolean = true;
+	export let min_height = false;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
 	$: value, dispatch("change");
 </script>
 
-<div class="output-html min-h-[4rem]" id={elem_id} class:!hidden={!visible}>
+<div
+	class:min-h-[6rem]={min_height}
+	class="output-html"
+	id={elem_id}
+	class:!hidden={!visible}
+>
 	{@html value}
 </div>
diff --git a/ui/packages/markdown/src/Markdown.svelte b/ui/packages/markdown/src/Markdown.svelte
@@ -5,6 +5,7 @@
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 	export let value: string;
+	export let min_height = false;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
@@ -13,7 +14,8 @@
 
 <div
 	id={elem_id}
-	class="output-markdown gr-prose min-h-[6rem]"
+	class:min-h-[6rem]={min_height}
+	class="output-markdown gr-prose"
 	class:hidden={!visible}
 	style="max-width: 100%"
 >