gistfile1.txt

diff --git a/src/devtools/client/debugger/src/components/App.js b/src/devtools/client/debugger/src/components/App.js
index 71049b01..505f103f 100644
--- a/src/devtools/client/debugger/src/components/App.js
+++ b/src/devtools/client/debugger/src/components/App.js
@@ -298,6 +298,7 @@ function DebuggerLoader(props) {
   useEffect(() => {
     (async () => {
       try {
+        await new Promise(r => setTimeout(r, 10_000));
         await waitForEditor();
         setLoadingEditor(false);
       } catch {
@@ -308,7 +309,11 @@ function DebuggerLoader(props) {
 
   return (
     <div className="debugger" ref={wrapperNode}>
-      {loadingEditor || loadingSettings ? null : (
+      {loadingEditor || loadingSettings ? (
+        <div>
+          <h1>Loading!!!!</h1>
+        </div>
+      ) : (
         <Debugger
           {...props}
           wrapper={wrapperNode.current}
diff --git a/src/devtools/client/webconsole/components/Input/JSTerm.js b/src/devtools/client/webconsole/components/Input/JSTerm.js
index cad8e524..ef48a017 100644
--- a/src/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/src/devtools/client/webconsole/components/Input/JSTerm.js
@@ -15,9 +15,15 @@ import { getCommandHistory } from "../../selectors/messages";
 
 import clamp from "lodash/clamp";
 
+async function waitForEditor() {
+  await new Promise(r => setTimeout(r, 5_000));
+  const Editor = (await import("devtools/client/debugger/src/utils/editor/source-editor")).default;
+  return Editor;
+}
+
 async function createEditor({ execute, historyCursorUp, historyCursorDown }) {
   await gToolbox.startPanel("debugger");
-  const Editor = (await import("devtools/client/debugger/src/utils/editor/source-editor")).default;
+  const Editor = await waitForEditor();
 
   const editor = new Editor({
     autofocus: true,
diff --git a/src/ui/components/DevTools.tsx b/src/ui/components/DevTools.tsx
index 79ebb04c..4cb78ed7 100644
--- a/src/ui/components/DevTools.tsx
+++ b/src/ui/components/DevTools.tsx
@@ -15,7 +15,10 @@ import KeyboardShortcuts from "./KeyboardShortcuts";
 import { useUserIsAuthor } from "ui/hooks/users";
 import { CommandPaletteModal } from "./CommandPalette/CommandPaletteModal";
 
-const DevView = React.lazy(() => import("./Views/DevView"));
+const DevView = React.lazy(async () => {
+  await new Promise(r => setTimeout(r, 2_000));
+  return import("./Views/DevView");
+});
 
 type _DevToolsProps = PropsFromRedux & DevToolsProps;
 
@@ -54,10 +57,6 @@ function _DevTools({
   const { recording } = useGetRecording(recordingId);
   const { userIsAuthor, loading } = useUserIsAuthor();
 
-  useEffect(() => {
-    import("./Views/DevView");
-  }, []);
-
   useEffect(() => {
     if (loading) {
       return;
diff --git a/src/ui/components/Header/ViewToggle.tsx b/src/ui/components/Header/ViewToggle.tsx
index 723089ad..ef65d41a 100644
--- a/src/ui/components/Header/ViewToggle.tsx
+++ b/src/ui/components/Header/ViewToggle.tsx
@@ -47,6 +47,13 @@ function Handle({ text, mode, localViewMode, handleToggle, motion }: HandleProps
   );
 }
 
+async function loadFramer() {
+  console.log("load framer");
+  await new Promise(r => setTimeout(r, 15_000));
+  const framer = await import("framer-motion");
+  return framer;
+}
+
 function ViewToggle({
   viewMode,
   setViewMode,
@@ -60,10 +67,9 @@ function ViewToggle({
   const [framerMotion, setFramerMotion] = useState<typeof import("framer-motion") | null>(null);
   const [localViewMode, setLocalViewMode] = useState(viewMode);
   const toggleTimeoutKey = useRef<NodeJS.Timeout | null>(null);
-  const preloadPromise = useRef<Promise<typeof import("../Views/DevView")> | null>(null);
 
   useEffect(() => {
-    import("framer-motion").then(framerMotion => setFramerMotion(framerMotion));
+    loadFramer().then(framerMotion => setFramerMotion(framerMotion));
   }, []);
 
   useEffect(() => {