Skip to content

[WIP] Hide simulator when editor is hidden to mute it #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
microbit-grace wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

[WIP] Hide simulator when editor is hidden to mute it #854

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b6e58e8
Hide simulator when editor is hidden to mute it
microbit-grace Apr 9, 2026
f47cfb8
Prettier
microbit-grace Apr 10, 2026
bfbeca2
Only hide simulator on data samples or testing model page
microbit-grace Apr 10, 2026
1b5811c
Hide simulator specifically on data samples and testing model pages
microbit-grace Apr 10, 2026
0086dc4
Only call hide simulator once
microbit-grace Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions src/hooks/project-hooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
RefObject,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
} from "react";
Expand Down Expand Up @@ -306,12 +307,40 @@ export const ProjectProvider = ({
setProjectEdited,
]
);

const hideSimulatorPromiseRef = useRef<Promise<void> | null>(null);

const hideSimulator = useCallback(async () => {
hideSimulatorPromiseRef.current =
driverRef.current?.hideSimulator() ?? null;
await hideSimulatorPromiseRef.current;
}, [driverRef]);

const initAsyncCalled = useRef(false);
useEffect(() => {
const initAsync = async () => {
// Hide simulator when not on code page to avoid it from making noise
// when editor is not visible. Hiding it prevents it from loading.
if (window.location.pathname !== createCodePageUrl()) {
initAsyncCalled.current = true;
await doAfterEditorUpdate(() => Promise.resolve());
await hideSimulator();
}
};
if (!initAsyncCalled.current) {
void initAsync();
}
return;
}, [doAfterEditorUpdate, driverRef, hideSimulator]);

const browserNavigationToEditor = useCallback(async () => {
try {
setProjectEdited();
await doAfterEditorUpdate(() => {
return Promise.resolve();
});
await doAfterEditorUpdate(() => Promise.resolve());

// Wait for simulator to finish hiding before showing simulator.
await hideSimulatorPromiseRef.current;
await driverRef.current?.showSimulator();
Comment on lines +325 to +327
Copy link
Copy Markdown
Author

@microbit-grace microbit-grace Apr 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Despite this wait, it doesn't work. Navigating quickly to code page straight after loading testing model page doesn't show the simulator. It causes the simulator to disappear from the editor. The user would need to toggle the showing/hiding of the simulator to get it to become visible again.

Copy link
Copy Markdown
Author

@microbit-grace microbit-grace Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps listening to the simevent would help (see potential editor sim events) in getting a more accurate indication of the sim state, but there's a comment in makecode-embed saying that it doesn't get fired.

Getting the simevent would also help in potentially being able to use stopSimulator instead of hideSimulator. I used hide because it stops the simulator from loading without needing to figure out when the sim is loaded. Stop simulator would require knowing when the simulator is loaded before calling it so that it can take effect.

return true;
} catch (e) {
if (e instanceof CodeEditorError) {
Expand All @@ -323,7 +352,7 @@ export const ProjectProvider = ({
logging.error(e);
return false;
}
}, [doAfterEditorUpdate, logging, setProjectEdited]);
}, [doAfterEditorUpdate, driverRef, logging, setProjectEdited]);
const resetProject = useStore((s) => s.resetProject);
const loadDataset = useStore((s) => s.loadDataset);
const loadFile = useCallback(
Expand Down Expand Up @@ -473,7 +502,8 @@ export const ProjectProvider = ({
focusVisible: openedViaKeyboardRef.current,
};
navigate(createTestingModelPageUrl(), { state });
}, [navigate]);
void hideSimulator();
}, [hideSimulator, navigate]);
const onSave = saveHex;
const downloadActions = useDownloadActions();
const onDownload = useCallback(
Expand Down
Loading