Implements option to disable auto-reload

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

@@ -56,7 +56,7 @@ export class PlaygroundModel {
 
 	public readonly serializer = new StateUrlSerializer(this);
 
-	reload(): void {
+	public reload(): void {
 		this.reloadKey++;
 	}
 
@@ -127,12 +127,29 @@ export class PlaygroundModel {
 
 	private readonly debouncer = new Debouncer(250);
 
+	@observable
+	public isDirty = false;
+
 	constructor() {
+		let lastState = this.state;
+
 		this.dispose.track({
 			dispose: reaction(
 				() => ({ state: this.state }),
 				({ state }) => {
+					if (!this.settings.autoReload) {
+						if (
+							JSON.stringify(state.monacoSetup) ===
+								JSON.stringify(lastState.monacoSetup) &&
+							state.key === lastState.key
+						) {
+							this.isDirty = true;
+							return;
+						}
+					}
 					this.debouncer.run(() => {
+						this.isDirty = false;
+						lastState = state;
 						for (const handler of this._previewHandlers) {
 							handler.handlePreview(state);
 						}

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

@@ -18,7 +18,7 @@ import { PlaygroundModel } from "./PlaygroundModel";
 import { Preview } from "./Preview";
 import { SettingsDialog } from "./SettingsDialog";
 import { Button, Col, Row, Stack } from "../../components/bootstrap";
-import { ButtonGroup } from "react-bootstrap";
+import { ButtonGroup, FormCheck } from "react-bootstrap";
 
 @hotComponent(module)
 @observer
@@ -114,11 +114,29 @@ export class PlaygroundPageContent extends React.Component<
 								titleBarItems={
 									<div
 										style={{ marginLeft: "auto" }}
-										className="d-flex gap-2"
+										className="d-flex gap-2 align-items-center"
 									>
+										{model.settings.previewFullScreen || (
+											<FormCheck
+												label="Auto-Reload"
+												className="text-nowrap"
+												checked={
+													model.settings.autoReload
+												}
+												onChange={(e) =>
+													(model.settings.autoReload =
+														e.target.checked)
+												}
+											/>
+										)}
 										<Button
 											type="button"
-											className="btn btn-light settings bi-arrow-clockwise"
+											className={
+												"btn settings bi-arrow-clockwise " +
+												(model.isDirty
+													? "btn-primary"
+													: "btn-light")
+											}
 											style={{
 												fontSize: 20,
 												padding: "0px 4px",

website/src/website/pages/playground/SettingsModel.ts

@@ -33,6 +33,14 @@ export class SettingsModel {
 		this.setSettings({ ...this._settings, previewFullScreen: value });
 	}
 
+	get autoReload() {
+		return this._settings.autoReload ?? true;
+	}
+
+	set autoReload(value: boolean) {
+		this.setSettings({ ...this._settings, autoReload: value });
+	}
+
 	constructor() {
 		const settingsStr = localStorage.getItem(this.settingsKey);
 		if (settingsStr) {
@@ -70,6 +78,7 @@ export interface Settings {
 	customConfig: JsonString<IMonacoSetup>;
 
 	previewFullScreen: boolean;
+	autoReload: boolean | undefined;
 }
 
 export type JsonString<T> = string;
@@ -167,6 +176,7 @@ export function getDefaultSettings(): Settings {
 			loaderPathsConfig: "",
 		}),
 		previewFullScreen: false,
+		autoReload: true,
 	};
 	return defaultSettings;
 }