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) {
+	if (!loading) {
-		loadMonacoPromise = _loadMonaco(setup);
+		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,10 +37,13 @@ export class PlaygroundPageContent extends React.Component<
 						className="h-100 g-2"
 						style={{ flexWrap: "wrap-reverse" }}
 					>
+						{model.wasEverNonFullScreen && (
 							<Col
 								md
 								className={
-								model.settings.previewFullScreen ? "d-none" : ""
+									model.settings.previewFullScreen
+										? "d-none"
+										: ""
 								}
 							>
 								<Vertical>
@@ -50,10 +53,14 @@ export class PlaygroundPageContent extends React.Component<
 											titleBarItems={
 												<div
 													className="hstack"
-												style={{ marginLeft: "auto" }}
+													style={{
+														marginLeft: "auto",
+													}}
 												>
 													<span
-													style={{ marginRight: 8 }}
+														style={{
+															marginRight: 8,
+														}}
 													>
 														Example:
 													</span>
@@ -69,7 +76,9 @@ export class PlaygroundPageContent extends React.Component<
 															model,
 															"selectedExample"
 														)}
-													getLabel={(i) => i.title}
+														getLabel={(i) =>
+															i.title
+														}
 													/>
 												</div>
 											}
@@ -108,6 +117,7 @@ export class PlaygroundPageContent extends React.Component<
 									</div>
 								</Vertical>
 							</Col>
+						)}
 						<Col md>
 							<LabeledEditor
 								label="Preview"