Merge pull request #3890 from microsoft/hediet/b/bewildered-swordtail

Don't load monaco editor in fullscreen

website/src/monaco-loader.ts

@@ -21,12 +21,24 @@ export interface IMonacoSetup {
 	monacoTypesUrl: string | undefined;
 }
 
-let loadMonacoPromise: Promise<typeof monaco> | undefined;
+let loading = false;
+let resolve: (value: typeof monaco) => void;
+let reject: (error: unknown) => void;
+let loadMonacoPromise = new Promise<typeof monaco>((res, rej) => {
+	resolve = res;
+	reject = rej;
+});
+
+export async function waitForLoadedMonaco(): Promise<typeof monaco> {
+	return loadMonacoPromise;
+}
+
 export async function loadMonaco(
 	setup: IMonacoSetup = prodMonacoSetup
 ): Promise<typeof monaco> {
-	if (!loadMonacoPromise) {
-		loadMonacoPromise = _loadMonaco(setup);
+	if (!loading) {
+		loading = true;
+		_loadMonaco(setup).then(resolve, reject);
 	}
 	return loadMonacoPromise;
 }

website/src/website/pages/playground/PlaygroundModel.ts

@@ -12,7 +12,11 @@ import {
 	reaction,
 	runInAction,
 } from "mobx";
-import { IMonacoSetup, loadMonaco } from "../../../monaco-loader";
+import {
+	IMonacoSetup,
+	loadMonaco,
+	waitForLoadedMonaco,
+} from "../../../monaco-loader";
 import { IPlaygroundProject, IPreviewState } from "../../../shared";
 import { monacoEditorVersion } from "../../monacoEditorVersion";
 import { Debouncer } from "../../utils/Debouncer";
@@ -62,6 +66,17 @@ export class PlaygroundModel {
 
 	private readonly _previewHandlers = new Set<IPreviewHandler>();
 
+	private _wasEverNonFullScreen = false;
+	public get wasEverNonFullScreen() {
+		if (this._wasEverNonFullScreen) {
+			return true;
+		}
+		if (!this.settings.previewFullScreen) {
+			this._wasEverNonFullScreen = true;
+		}
+		return this._wasEverNonFullScreen;
+	}
+
 	@computed.struct
 	get monacoSetup(): IMonacoSetup {
 		const sourceOverride = this.serializer.sourceOverride;
@@ -159,10 +174,10 @@ export class PlaygroundModel {
 			),
 		});
 
-		const observablePromise = new ObservablePromise(loadMonaco());
+		const observablePromise = new ObservablePromise(waitForLoadedMonaco());
 		let disposable: Disposable | undefined = undefined;
 
-		loadMonaco().then((m) => {
+		waitForLoadedMonaco().then((m) => {
 			const options =
 				monaco.languages.typescript.javascriptDefaults.getCompilerOptions();
 			monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(

website/src/website/pages/playground/PlaygroundPageContent.tsx

@@ -37,77 +37,87 @@ export class PlaygroundPageContent extends React.Component<
 						className="h-100 g-2"
 						style={{ flexWrap: "wrap-reverse" }}
 					>
-						<Col
-							md
-							className={
-								model.settings.previewFullScreen ? "d-none" : ""
-							}
-						>
-							<Vertical>
-								<div style={{ flex: 1 }}>
-									<LabeledEditor
-										label="JavaScript"
-										titleBarItems={
-											<div
-												className="hstack"
-												style={{ marginLeft: "auto" }}
-											>
-												<span
-													style={{ marginRight: 8 }}
+						{model.wasEverNonFullScreen && (
+							<Col
+								md
+								className={
+									model.settings.previewFullScreen
+										? "d-none"
+										: ""
+								}
+							>
+								<Vertical>
+									<div style={{ flex: 1 }}>
+										<LabeledEditor
+											label="JavaScript"
+											titleBarItems={
+												<div
+													className="hstack"
+													style={{
+														marginLeft: "auto",
+													}}
 												>
-													Example:
-												</span>
-												<Select<PlaygroundExample>
-													values={getPlaygroundExamples().map(
-														(e) => ({
-															groupTitle:
-																e.chapterTitle,
-															items: e.examples,
-														})
-													)}
-													value={ref(
-														model,
-														"selectedExample"
-													)}
-													getLabel={(i) => i.title}
-												/>
-											</div>
-										}
-									>
-										<Editor
-											language={"javascript"}
-											value={ref(model, "js")}
-										/>
-									</LabeledEditor>
-								</div>
+													<span
+														style={{
+															marginRight: 8,
+														}}
+													>
+														Example:
+													</span>
+													<Select<PlaygroundExample>
+														values={getPlaygroundExamples().map(
+															(e) => ({
+																groupTitle:
+																	e.chapterTitle,
+																items: e.examples,
+															})
+														)}
+														value={ref(
+															model,
+															"selectedExample"
+														)}
+														getLabel={(i) =>
+															i.title
+														}
+													/>
+												</div>
+											}
+										>
+											<Editor
+												language={"javascript"}
+												value={ref(model, "js")}
+											/>
+										</LabeledEditor>
+									</div>
 
-								<div>
-									<LabeledEditor label="HTML">
-										<Editor
-											height={{
-												kind: "dynamic",
-												maxHeight: 200,
-											}}
-											language={"html"}
-											value={ref(model, "html")}
-										/>
-									</LabeledEditor>
-								</div>
+									<div>
+										<LabeledEditor label="HTML">
+											<Editor
+												height={{
+													kind: "dynamic",
+													maxHeight: 200,
+												}}
+												language={"html"}
+												value={ref(model, "html")}
+											/>
+										</LabeledEditor>
+									</div>
 
-								<div>
-									<LabeledEditor label="CSS">
-										<Editor
-											height={{
-												kind: "dynamic",
-												maxHeight: 200,
-											}}
-											language={"css"}
-											value={ref(model, "css")}
-										/>
-									</LabeledEditor>
-								</div>
-							</Vertical>
-						</Col>
+									<div>
+										<LabeledEditor label="CSS">
+											<Editor
+												height={{
+													kind: "dynamic",
+													maxHeight: 200,
+												}}
+												language={"css"}
+												value={ref(model, "css")}
+											/>
+										</LabeledEditor>
+									</div>
+								</Vertical>
+							</Col>
+						)}
 						<Col md>
 							<LabeledEditor
 								label="Preview"