new logo, remove initial_height after loading (#3292)

* new logo, remove initial_height after loading

* tweak

* changelog

* cleanup

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Added a timeout to queue messages as some demos were experiencing infinitely growing queues from active jobs waiting forever for clients to respond by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3196](https://github.com/gradio-app/gradio/pull/3196)
 - Fixes the height of rendered LaTeX images so that they match the height of surrounding text by [@abidlabs](https://github.com/abidlabs) in [PR 3258](https://github.com/gradio-app/gradio/pull/3258) and in [PR 3276](https://github.com/gradio-app/gradio/pull/3276)
 - Fix bug where matplotlib images where always too small on the front end by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3274](https://github.com/gradio-app/gradio/pull/3274) 
+- Remove embed's `initial_height` when loading is complete so the embed finds its natural height once it is loaded [@pngwn](https://github.com/pngwn) in [PR 3292](https://github.com/gradio-app/gradio/pull/3292)
 - Prevent Sketch from crashing when a default image is provided by [@pngwn](https://github.com/pngwn) in [PR 3277](https://github.com/gradio-app/gradio/pull/3277)
 - Respect the `shape` argument on the front end when creating Image Sketches by [@pngwn](https://github.com/pngwn) in [PR 3277](https://github.com/gradio-app/gradio/pull/3277)
 - Fix infinite loop caused by setting `Dropdown's` value to be `[]` and adding a change event on the dropdown by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3295](https://github.com/gradio-app/gradio/pull/3295)  

ui/packages/app/src/Embed.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import space_logo from "./images/spaces.svg";
 	export let wrapper: HTMLDivElement;
 	export let version: string;
 	export let initial_height: string;
@@ -7,6 +8,7 @@
 	export let space: string | null;
 	export let display: boolean;
 	export let info: boolean;
+	export let loaded: boolean;
 </script>
 
 <div
@@ -15,7 +17,7 @@
 	class:embed-container={display}
 	class:with-info={info}
 	class="gradio-container gradio-container-{version}"
-	style:min-height={initial_height}
+	style={loaded ? "" : `min-height: ${initial_height}`}
 	style:flex-grow={!display ? "1" : "auto"}
 >
 	<div class="main">
@@ -34,7 +36,7 @@
 			<span>
 				Hosted on
 				<a class="hf" href="https://huggingface.co/spaces"
-					><span class="emoji">🤗</span> Spaces</a
+					><span class="space-logo"><img src={space_logo} /></span> Spaces</a
 				>
 			</span>
 		</div>
@@ -175,9 +177,14 @@
 		font-family: var(--font-mono);
 	}
 
-	.emoji {
-		margin-right: 1px;
-		font-size: var(--scale-000);
+	.hf {
+		margin-left: 5px;
+	}
+
+	.space-logo img {
+		display: inline-block;
+		margin-bottom: 4px;
+		height: 12px;
 	}
 
 	a:hover {

ui/packages/app/src/Index.svelte

@@ -423,6 +423,7 @@
 	{version}
 	{initial_height}
 	{space}
+	loaded={status === "success"}
 	bind:wrapper
 >
 	{#if status === "pending" || status === "error"}

ui/packages/app/src/images/spaces.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none">
+  <path fill="#FF3270" d="M1.93 6.03v2.04h2.04V6.03H1.93Z"/>
+  <path fill="#861FFF" d="M6.03 6.03v2.04h2.04V6.03H6.03Z"/>
+  <path fill="#097EFF" d="M1.93 1.93v2.04h2.04V1.93H1.93Z"/>
+  <path fill="#000" fill-rule="evenodd" d="M.5 1.4c0-.5.4-.9.9-.9h3.1a.9.9 0 0 1 .87.67A2.44 2.44 0 0 1 9.5 2.95c0 .65-.25 1.24-.67 1.68.39.1.67.46.67.88v3.08c0 .5-.4.91-.9.91H1.4a.9.9 0 0 1-.9-.9V1.4Zm1.43.53v2.04h2.04V1.93H1.93Zm0 6.14V6.03h2.04v2.04H1.93Zm4.1 0V6.03h2.04v2.04H6.03Zm0-5.12a1.02 1.02 0 1 1 2.04 0 1.02 1.02 0 0 1-2.04 0Z" clip-rule="evenodd"/>
+  <path fill="#FFD702" d="M7.05 1.93a1.02 1.02 0 1 0 0 2.04 1.02 1.02 0 0 0 0-2.04Z"/>
+</svg>