Repository: gradio-app/gradio

Issue:
`Code` component label overlays on text after refreshing the page
### Describe the bug

Very strange bug:

When the Gradio app page containing the `Code` component is refreshed (but NOT hard-refreshed), then the label in the `Code` component overlays on the code string. Here's how it looks:

<img width="549" alt="image" src="https://user-images.githubusercontent.com/1778297/225155003-2c1f3069-6f9c-49b8-9696-15ffa1df9342.png">


### Is there an existing issue for this?

- [X] I have searched the existing issues

### Reproduction

Visit: https://huggingface.co/spaces/loubnabnl/santacoder-demo

Do a regular refresh (not a hard refresh) to see the issue 

### Screenshot

_No response_

### Logs

```shell
N/A
```


### System Info

```shell
Gradio 3.21
```


### Severity

annoying


Discussion:

Resolving patch:
diff --git a/demo/code/run.py b/demo/code/run.py
--- a/demo/code/run.py
+++ b/demo/code/run.py
@@ -13,7 +13,7 @@ def set_lang(language):
 
 def set_lang_from_path():
     sleep(1)
-    return gr.Code.update((css_file, ), language="css")
+    return gr.Code.update((css_file,), language="css")
 
 
 def code(language, code):
@@ -25,7 +25,11 @@ def code(language, code):
 with gr.Blocks() as demo:
     lang = gr.Dropdown(value="python", choices=gr.Code.languages)
     with gr.Row():
-        code_in = gr.Code(language="python", label="Input")
+        code_in = gr.Code(
+            language="python",
+            label="Input",
+            value='def all_odd_elements(sequence):\n    """Returns every odd element of the sequence."""',
+        )
         code_out = gr.Code(label="Ouput")
     btn = gr.Button("Run")
     btn_two = gr.Button("Load File")


Test patch:
diff --git a/ui/packages/app/test/blocks_inputs.spec.ts b/ui/packages/app/test/blocks_inputs.spec.ts
--- a/ui/packages/app/test/blocks_inputs.spec.ts
+++ b/ui/packages/app/test/blocks_inputs.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -28,7 +29,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_inputs");
 	await mock_api(page, [["hi dawood"]]);
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const textboxes = await page.getByLabel("Input");
 
diff --git a/ui/packages/app/test/blocks_kinematics.spec.ts b/ui/packages/app/test/blocks_kinematics.spec.ts
--- a/ui/packages/app/test/blocks_kinematics.spec.ts
+++ b/ui/packages/app/test/blocks_kinematics.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -28,7 +29,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_kinematics");
 	await mock_api(page, [[25, 45]]);
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	await Promise.all([
 		page.click("button:has-text('Run')"),
diff --git a/ui/packages/app/test/blocks_page_load.spec.ts b/ui/packages/app/test/blocks_page_load.spec.ts
--- a/ui/packages/app/test/blocks_page_load.spec.ts
+++ b/ui/packages/app/test/blocks_page_load.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -28,7 +29,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_page_load");
 	await mock_api(page, [["Welcome! This page has loaded for Frank"]]);
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const textbox = await page.getByLabel("Name");
 
diff --git a/ui/packages/app/test/blocks_xray.spec.ts b/ui/packages/app/test/blocks_xray.spec.ts
--- a/ui/packages/app/test/blocks_xray.spec.ts
+++ b/ui/packages/app/test/blocks_xray.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -27,7 +28,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_xray");
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const description = await page.getByTestId("markdown");
 	await expect(description).toContainText("Detect Disease From Scan");
@@ -56,7 +58,8 @@ test("can run an api request and display the data", async ({ page }) => {
 		]
 	]);
 
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	await page.getByLabel("Covid").check();
 	await page.getByLabel("Lung Cancer").check();
diff --git a/ui/packages/app/test/input_output.spec.ts b/ui/packages/app/test/input_output.spec.ts
--- a/ui/packages/app/test/input_output.spec.ts
+++ b/ui/packages/app/test/input_output.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -28,7 +29,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("a component acts as both input and output", async ({ page }) => {
 	await mock_demo(page, "input_output");
 	await mock_api(page, [["tset"]]);
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const textbox = await page.getByLabel("Input-Output");
 
diff --git a/ui/packages/app/test/kitchen_sink.spec.ts b/ui/packages/app/test/kitchen_sink.spec.ts
--- a/ui/packages/app/test/kitchen_sink.spec.ts
+++ b/ui/packages/app/test/kitchen_sink.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect, Page } from "@playwright/test";
 import { BASE64_IMAGE, BASE64_AUDIO } from "./media_data";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -28,7 +29,8 @@ function mock_api(page: Page, body: Array<unknown>) {
 
 test("test inputs", async ({ page }) => {
 	await mock_demo(page, "kitchen_sink");
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const textbox = await page.getByLabel("Textbox").nth(0);
 	await expect(textbox).toHaveValue("Lorem ipsum");
@@ -209,7 +211,8 @@ test("test outputs", async ({ page }) => {
 		]
 	]);
 
-	await page.goto("http://localhost:9876");
+	await mock_theme(page);
+	await wait_for_page(page);
 
 	const submit_button = await page.locator("button", { hasText: /Submit/ });
 
diff --git a/ui/packages/app/test/outbreak_forecast.spec.ts b/ui/packages/app/test/outbreak_forecast.spec.ts
--- a/ui/packages/app/test/outbreak_forecast.spec.ts
+++ b/ui/packages/app/test/outbreak_forecast.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect, Page } from "@playwright/test";
 import { BASE64_PLOT_IMG } from "./media_data";
+import { mock_theme, wait_for_page } from "./utils";
 
 function mock_demo(page: Page, demo: string) {
 	return page.route("**/config", (route) => {
@@ -12,17 +13,6 @@ function mock_demo(page: Page, demo: string) {
 	});
 }
 
-function mock_theme(page: Page) {
-	return page.route("**/theme.css", (route) => {
-		return route.fulfill({
-			headers: {
-				"Access-Control-Allow-Origin": "*"
-			},
-			path: `./test/mocks/theme.css`
-		});
-	});
-}
-
 function mock_api(page: Page, body: Array<unknown>) {
 	return page.route("**/run/predict", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
@@ -41,7 +31,7 @@ test("matplotlib", async ({ page }) => {
 	await mock_demo(page, "outbreak_forecast");
 	await mock_api(page, [[{ type: "matplotlib", plot: BASE64_PLOT_IMG }]]);
 	await mock_theme(page);
-	await page.goto("http://localhost:9876");
+	await wait_for_page(page);
 
 	await page.getByLabel("Plot Type").click();
 	await page.getByRole("button", { name: "Matplotlib" }).click();
diff --git a/ui/packages/app/test/slider_release.spec.ts b/ui/packages/app/test/slider_release.spec.ts
--- a/ui/packages/app/test/slider_release.spec.ts
+++ b/ui/packages/app/test/slider_release.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, Page, Locator } from "@playwright/test";
+import { mock_theme, wait_for_page } from "./utils";
 
 //taken from: https://github.com/microsoft/playwright/issues/20032
 async function changeSlider(
@@ -59,8 +60,8 @@ function mock_api(page: Page) {
 test("slider release", async ({ page }) => {
 	await mock_demo(page, "slider_release");
 	await mock_api(page);
-	await page.goto("http://localhost:9876");
-
+	await mock_theme(page);
+	await wait_for_page(page);
 	const slider = page.getByLabel("Slider");
 
 	await changeSlider(page, slider, slider, 0.7);
diff --git a/ui/packages/app/test/utils.ts b/ui/packages/app/test/utils.ts
new file mode 100644
--- /dev/null
+++ b/ui/packages/app/test/utils.ts
@@ -0,0 +1,17 @@
+import type { Page } from "@playwright/test";
+
+export function mock_theme(page: Page) {
+	return page.route("**/theme.css", (route) => {
+		return route.fulfill({
+			headers: {
+				"Access-Control-Allow-Origin": "*"
+			},
+			path: `./test/mocks/theme.css`
+		});
+	});
+}
+
+export async function wait_for_page(page: Page) {
+	await page.goto("http://localhost:9876");
+	await page.waitForResponse("**/theme.css");
+}