diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 7f978c4d67..788b69e483 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -127,6 +127,7 @@
   import translator from '../../translator';
   import { updateAnswersToQuestionType, assessmentItemKey } from '../../utils';
   import { AssessmentItemTypeLabels } from '../../constants';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
   import {
     ContentModalities,
     AssessmentItemTypes,
@@ -136,7 +137,6 @@
   import ErrorList from 'shared/views/ErrorList/ErrorList';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
-  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   export default {
     name: 'AssessmentItemEditor',
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index 641d769714..2f17837710 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -299,6 +299,10 @@ const MESSAGES = {
     message: 'Special Characters',
     context: 'Title for the menu containing special characters and mathematical symbols.',
   },
+  loadingFormulas: {
+    message: 'Loading math editor',
+    context: 'Text displayed while the math editor is being loaded.',
+  },
 
   // Error Messages
   errorUploadingImage: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 6cb3df0ea9..308f414bea 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -135,11 +135,13 @@
     <!-- More dropdown - only visible when there are overflow categories -->
     <div
       v-if="overflowCategories.length > 0"
+      ref="moreDropdownContainer"
       class="more-dropdown-container"
       role="group"
       :aria-label="'More options'"
     >
       <ToolbarButton
+        ref="moreButton"
         :title="'More options'"
         :icon="require('../../assets/icon-chevron-down.svg')"
         :is-active="isMoreDropdownOpen"
@@ -150,8 +152,9 @@
       />
 
       <div
-        v-if="isMoreDropdownOpen"
+        v-show="isMoreDropdownOpen"
         id="more-options-menu"
+        ref="moreDropdown"
         class="more-dropdown"
         role="menu"
         :aria-label="'Additional formatting options'"
@@ -302,6 +305,9 @@
     },
     setup(props, { emit }) {
       const toolbarRef = ref(null);
+      const moreButton = ref(null);
+      const moreDropdown = ref(null);
+      const moreDropdownContainer = ref(null);
       const isMoreDropdownOpen = ref(false);
       const toolbarWidth = ref(0);
 
@@ -360,20 +366,24 @@
 
       const updateToolbarWidth = () => {
         if (toolbarRef.value) {
-          toolbarWidth.value = toolbarRef.value.offsetWidth;
+          // Batch layout reads in next frame
+          requestAnimationFrame(() => {
+            toolbarWidth.value = toolbarRef.value.offsetWidth;
+          });
         }
       };
 
       const handleResize = entries => {
-        setTimeout(() => {
+        // Use ResizeObserver data directly - no DOM reading
+        requestAnimationFrame(() => {
           for (const entry of entries) {
             toolbarWidth.value = entry.contentRect.width;
           }
-        }, 0);
+        });
       };
 
       const handleWindowResize = () => {
-        setTimeout(updateToolbarWidth, 0);
+        requestAnimationFrame(updateToolbarWidth);
       };
 
       const onToolClick = (tool, event) => {
@@ -405,14 +415,11 @@
           isMoreDropdownOpen.value = false;
           // Return focus to the more button
           await nextTick();
-          const moreButton = toolbarRef.value?.querySelector(
-            '.more-dropdown-container [role="button"]',
-          );
-          moreButton?.focus();
+          moreButton.value?.$el?.focus();
         } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
           event.preventDefault();
           const menuItems = Array.from(
-            event.currentTarget.querySelectorAll('[role="menuitem"]:not(:disabled)'),
+            moreDropdown.value?.querySelectorAll('[role="menuitem"]:not(:disabled)') || [],
           );
           const currentIndex = menuItems.indexOf(document.activeElement);
 
@@ -429,8 +436,7 @@
 
       // Close dropdown when clicking outside
       const handleClickOutside = event => {
-        const dropdown = event.target.closest('.more-dropdown-container');
-        if (!dropdown) {
+        if (moreDropdownContainer.value && !moreDropdownContainer.value.contains(event.target)) {
           isMoreDropdownOpen.value = false;
         }
       };
@@ -438,19 +444,21 @@
       onMounted(async () => {
         await nextTick();
 
-        // Initial width measurement
-        updateToolbarWidth();
+        // Initial width measurement in next frame
+        requestAnimationFrame(() => {
+          updateToolbarWidth();
+        });
 
         // Set up resize observer
         if (toolbarRef.value && window.ResizeObserver) {
           resizeObserver = new ResizeObserver(handleResize);
           resizeObserver.observe(toolbarRef.value);
         } else {
-          // Fallback to window resize listener
-          window.addEventListener('resize', handleWindowResize);
+          // Fallback to window resize listener with passive flag
+          window.addEventListener('resize', handleWindowResize, { passive: true });
         }
 
-        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('click', handleClickOutside, { passive: true });
       });
 
       onUnmounted(() => {
@@ -464,6 +472,9 @@
 
       return {
         toolbarRef,
+        moreButton,
+        moreDropdown,
+        moreDropdownContainer,
         isMoreDropdownOpen,
         visibleCategories,
         overflowCategories,
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
index ffe1ab452f..7b937e508b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
@@ -2,6 +2,7 @@
 
   <NodeViewWrapper class="image-node-wrapper">
     <div
+      ref="containerRef"
       class="image-node-view"
       :class="{ 'is-selected': selected && editor.isEditable }"
       :style="{ width: styleWidth }"
@@ -47,6 +48,7 @@
 
       <div
         v-if="editor.isEditable"
+        ref="resizeHandleRef"
         class="resize-handle"
         tabindex="0"
         role="slider"
@@ -74,13 +76,18 @@
     components: {
       NodeViewWrapper,
     },
+
     setup(props) {
       const width = ref(props.node.attrs.width || null);
       const height = ref(props.node.attrs.height || null);
       const imageRef = ref(null);
+      const containerRef = ref(null);
+      const resizeHandleRef = ref(null);
       const naturalAspectRatio = ref(null);
       const minWidth = 50;
       const compactThreshold = 200;
+      const debounceTimer = null;
+      let resizeListeners = null;
 
       // Create debounced version of saveSize function
       const debouncedSaveSize = _.debounce(() => {
@@ -149,6 +156,7 @@
       };
 
       const isRtl = computed(() => {
+        // Cache the RTL check result to avoid repeated DOM traversal
         return props.editor.view.dom.closest('[dir="rtl"]') !== null;
       });
 
@@ -176,7 +184,7 @@
 
       const onResizeStart = startEvent => {
         const startX = startEvent.clientX;
-        const startWidth = width.value || startEvent.target.parentElement.offsetWidth;
+        const startWidth = width.value || containerRef.value.offsetWidth;
 
         const onMouseMove = moveEvent => {
           const deltaX = moveEvent.clientX - startX;
@@ -186,23 +194,39 @@
             : startWidth + deltaX; // In LTR, moving right should increase width
 
           const clampedWidth = Math.max(minWidth, newWidth);
-          width.value = clampedWidth;
-          height.value = calculateProportionalHeight(clampedWidth);
+
+          // Batch DOM updates
+          requestAnimationFrame(() => {
+            width.value = clampedWidth;
+            height.value = calculateProportionalHeight(clampedWidth);
+          });
         };
 
         const onMouseUp = () => {
-          document.removeEventListener('mousemove', onMouseMove);
-          document.removeEventListener('mouseup', onMouseUp);
+          // Clean up listeners
+          if (resizeListeners) {
+            document.removeEventListener('mousemove', resizeListeners.move);
+            document.removeEventListener('mouseup', resizeListeners.up);
+            resizeListeners = null;
+          }
           saveSize();
         };
 
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
+        // Store listeners for proper cleanup
+        resizeListeners = {
+          move: onMouseMove,
+          up: onMouseUp,
+        };
+
+        // Use passive listeners where possible
+        document.addEventListener('mousemove', onMouseMove, { passive: true });
+        document.addEventListener('mouseup', onMouseUp, { passive: true });
       };
 
       const onResizeKeyDown = event => {
         const step = 10;
-        const currentWidth = width.value || event.target.parentElement.offsetWidth;
+        // Use ref instead of DOM query
+        const currentWidth = width.value || containerRef.value.offsetWidth;
         let newWidth = currentWidth;
 
         // Invert keyboard controls for RTL
@@ -214,7 +238,8 @@
         } else if (event.key === leftKey) {
           newWidth = currentWidth - step;
         } else if (event.key === 'Escape' || event.key === 'Enter') {
-          event.target.blur();
+          // Use ref instead of DOM query
+          resizeHandleRef.value?.blur();
           const endPosition = props.getPos() + props.node.nodeSize;
           props.editor.chain().focus().insertContentAt(endPosition, { type: 'paragraph' }).run();
           return;
@@ -223,8 +248,12 @@
         }
 
         const clampedWidth = Math.max(minWidth, newWidth);
-        width.value = clampedWidth;
-        height.value = calculateProportionalHeight(clampedWidth);
+
+        // Batch DOM updates
+        requestAnimationFrame(() => {
+          width.value = clampedWidth;
+          height.value = calculateProportionalHeight(clampedWidth);
+        });
 
         debouncedSaveSize();
       };
@@ -251,13 +280,21 @@
       });
 
       onUnmounted(() => {
-        // Cancel any pending debounced calls
-        debouncedSaveSize.cancel();
+        clearTimeout(debounceTimer);
+
+        // Clean up any remaining resize listeners
+        if (resizeListeners) {
+          document.removeEventListener('mousemove', resizeListeners.move);
+          document.removeEventListener('mouseup', resizeListeners.up);
+          resizeListeners = null;
+        }
       });
 
       return {
         width,
         imageRef,
+        containerRef,
+        resizeHandleRef,
         styleWidth,
         onResizeStart,
         removeImage,
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
index 298066381b..c018128026 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
@@ -29,7 +29,14 @@
 
       <div class="card-content">
         <div class="symbol-editor">
+          <div
+            v-if="!mathLiveLoaded"
+            class="loading-placeholder"
+          >
+            {{ loadingFormulas$() }}...
+          </div>
           <math-field
+            v-else
             ref="mathfieldEl"
             aria-label="Math formula editor"
           />
@@ -68,10 +75,15 @@
                 @mouseleave="onSymbolMouseLeave"
               >
                 <math-field
+                  v-if="mathLiveLoaded"
                   read-only
                   tabindex="-1"
                   :value="symbol.preview"
                 />
+                <span
+                  v-else
+                  class="symbol-fallback"
+                >{{ symbol.preview }}</span>
               </button>
             </div>
           </div>
@@ -81,7 +93,7 @@
       <footer>
         <button
           class="insert-button"
-          :disabled="isFormulaEmpty"
+          :disabled="isFormulaEmpty || !mathLiveLoaded"
           @click="onSave"
         >
           {{ insert$() }}
@@ -95,8 +107,7 @@
 
 <script>
 
-  import { ref, onMounted, defineComponent, computed } from 'vue';
-  import 'mathlive';
+  import { ref, onMounted, defineComponent, computed, nextTick } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import { useMathLiveLocale } from '../../composables/useMathLiveLocale';
@@ -108,44 +119,63 @@
       const rootEl = ref(null);
       const mathfieldEl = ref(null);
       const infoText = ref('');
+      const mathLiveLoaded = ref(false);
 
       useFocusTrap(rootEl);
 
       const currentLatex = ref('');
 
-      // Watch for changes in the mathfield
-      const updateLatex = () => {
-        if (mathfieldEl.value) {
-          currentLatex.value = mathfieldEl.value.getValue('latex');
-        }
-      };
+      // Load MathLive dynamically
+      const loadMathLive = async () => {
+        try {
+          // Dynamic import of mathlive
+          await import(/* webpackChunkName: "mathlive" */ 'mathlive');
+
+          // Configure MathLive after it's loaded
+          if (typeof window !== 'undefined' && window.MathfieldElement) {
+            window.MathfieldElement.soundsDirectory = null;
+            if (window.mathVirtualKeyboard) {
+              window.mathVirtualKeyboard.plonkSound = null;
+              window.mathVirtualKeyboard.keypressSound = null;
+            }
+          }
 
-      const isFormulaEmpty = computed(() => {
-        return !currentLatex.value || currentLatex.value.trim() === '';
-      });
+          mathLiveLoaded.value = true;
 
-      onMounted(() => {
-        if (typeof window !== 'undefined' && window.MathfieldElement) {
-          // Disable sounds globally
-          window.MathfieldElement.soundsDirectory = null;
-
-          // Disable virtual keyboard globally
-          if (window.mathVirtualKeyboard) {
-            window.mathVirtualKeyboard.plonkSound = null;
-            window.mathVirtualKeyboard.keypressSound = null;
-          }
+          // Initialize the mathfield after MathLive is loaded
+          await initializeMathfield();
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load MathLive:', error);
         }
+      };
+
+      const initializeMathfield = async () => {
+        // Wait for next tick to ensure the mathfield element is rendered
+        await nextTick();
 
         if (mathfieldEl.value) {
-          // Configure the specific mathfield instance
           mathfieldEl.value.mathVirtualKeyboardPolicy = 'manual';
           mathfieldEl.value.value = props.initialLatex;
           mathfieldEl.value.focus();
-
-          // Listen for input changes
           mathfieldEl.value.addEventListener('input', updateLatex);
           currentLatex.value = props.initialLatex;
         }
+      };
+
+      // Watch for changes in the mathfield
+      const updateLatex = () => {
+        if (mathfieldEl.value && mathLiveLoaded.value) {
+          currentLatex.value = mathfieldEl.value.getValue('latex');
+        }
+      };
+
+      const isFormulaEmpty = computed(() => {
+        return !currentLatex.value || currentLatex.value.trim() === '';
+      });
+
+      onMounted(() => {
+        loadMathLive();
       });
 
       const getSymbol = (symbolsGroupIdx, symbolIdx) => {
@@ -155,7 +185,6 @@
       const getSymbolClasses = (symbolsGroup, symbolsGroupIdx) => {
         const classes = ['symbol'];
 
-        // Get the original titleKey from symbolsData
         const originalGroup = symbolsData[symbolsGroupIdx];
         if (
           originalGroup &&
@@ -177,29 +206,28 @@
       };
 
       const onSymbolClick = (symbolsGroupIdx, symbolIdx) => {
+        if (!mathLiveLoaded.value || !mathfieldEl.value) return;
+
         const symbol = getSymbol(symbolsGroupIdx, symbolIdx);
+        const originalGroup = symbolsData[symbolsGroupIdx];
+        const valueToInsert =
+          originalGroup?.titleKey === 'formulasCategory' && symbol.template
+            ? symbol.template
+            : symbol.preview;
 
-        if (mathfieldEl.value) {
-          // Use template if available (for formulas category), otherwise use preview
-          const originalGroup = symbolsData[symbolsGroupIdx];
-          const valueToInsert =
-            originalGroup?.titleKey === 'formulasCategory' && symbol.template
-              ? symbol.template
-              : symbol.preview;
-
-          mathfieldEl.value.executeCommand(['insert', valueToInsert]);
-          mathfieldEl.value.focus();
-        }
+        mathfieldEl.value.executeCommand(['insert', valueToInsert]);
+        mathfieldEl.value.focus();
       };
 
       const onSave = () => {
-        if (mathfieldEl.value) {
+        if (mathfieldEl.value && mathLiveLoaded.value) {
           const newLatex = mathfieldEl.value.getValue('latex');
           emit('save', newLatex);
         }
       };
 
-      const { formulasMenuTitle$, insert$, closeModal$ } = getTipTapEditorStrings();
+      const { formulasMenuTitle$, insert$, closeModal$, loadingFormulas$ } =
+        getTipTapEditorStrings();
       const formulasStrings = getFormulasStrings();
 
       // Transform symbols data to use translations
@@ -227,6 +255,7 @@
       return {
         rootEl,
         mathfieldEl,
+        mathLiveLoaded,
         symbolGroups,
         infoText,
         getSymbolClasses,
@@ -237,6 +266,7 @@
         formulasMenuTitle$,
         insert$,
         closeModal$,
+        loadingFormulas$,
         isFormulaEmpty,
       };
     },
@@ -307,6 +337,20 @@
     text-align: center;
   }
 
+  .loading-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    padding: 8px;
+    font-size: 1.2rem;
+    color: #666666;
+    background-color: #f9f9f9;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+  }
+
   .symbol-editor math-field {
     width: 100%;
     min-height: 80px;
@@ -398,6 +442,12 @@
     border: 0;
   }
 
+  .symbol-fallback {
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+    color: #666666;
+  }
+
   footer {
     display: flex;
     justify-content: flex-end;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/LazyMathNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/LazyMathNodeView.vue
new file mode 100644
index 0000000000..d05933c9c1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/LazyMathNodeView.vue
@@ -0,0 +1,119 @@
+<template>
+
+  <NodeViewWrapper
+    as="span"
+    class="math-node-wrapper"
+  >
+    <div
+      v-if="!mathComponentLoaded"
+      class="math-loading"
+      @click="openEditor"
+    >
+      {{ node.attrs.latex }}
+    </div>
+    <component
+      :is="MathNodeViewComponent"
+      v-else
+      :node="node"
+      :editor="editor"
+      :getPos="getPos"
+      :updateAttributes="updateAttributes"
+      :deleteNode="deleteNode"
+    />
+  </NodeViewWrapper>
+
+</template>
+
+
+<script>
+
+  import { defineComponent, ref, onMounted } from 'vue';
+  import { NodeViewWrapper } from '@tiptap/vue-2';
+
+  export default defineComponent({
+    name: 'LazyMathNodeView',
+    components: {
+      NodeViewWrapper,
+    },
+    setup(props) {
+      const mathComponentLoaded = ref(false);
+      const MathNodeViewComponent = ref(null);
+
+      // Must have all props defined to match the original component
+      const openEditor = () => {
+        props.editor.emit('open-math-editor', {
+          pos: props.getPos(),
+          latex: props.node.attrs.latex,
+        });
+      };
+
+      onMounted(async () => {
+        try {
+          // Load the actual MathNodeView component
+          const { default: MathNodeView } = await import(
+            /* webpackChunkName: "mathlive" */ './MathNodeView.vue'
+          );
+          MathNodeViewComponent.value = MathNodeView;
+          mathComponentLoaded.value = true;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load MathLive:', error);
+        }
+      });
+
+      return {
+        mathComponentLoaded,
+        MathNodeViewComponent,
+        openEditor,
+      };
+    },
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+      editor: {
+        type: Object,
+        required: true,
+      },
+      getPos: {
+        type: Function,
+        required: true,
+      },
+      updateAttributes: {
+        type: Function,
+        default: null,
+      },
+      deleteNode: {
+        type: Function,
+        default: null,
+      },
+    },
+  });
+
+</script>
+
+
+<style scoped>
+
+  .math-node-wrapper {
+    display: inline-block;
+  }
+
+  .math-loading {
+    display: inline-block;
+    min-width: 20px;
+    min-height: 1em;
+    padding: 2px 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+    cursor: pointer;
+    background-color: #f1f3f5;
+    border-radius: 4px;
+  }
+
+  .math-loading:hover {
+    background-color: #e9ecef;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
index 8fa8e8c970..379f16aec4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
@@ -1,7 +1,14 @@
 <template>
 
   <NodeViewWrapper class="math-node-wrapper">
+    <div
+      v-if="!mathLiveLoaded"
+      class="math-loading"
+    >
+      {{ node.attrs.latex }}
+    </div>
     <math-field
+      v-else
       :key="node.attrs.latex"
       read-only
       :value="node.attrs.latex"
@@ -15,12 +22,26 @@
 <script>
 
   import { NodeViewWrapper } from '@tiptap/vue-2';
+  import { ref, onMounted } from 'vue';
 
   export default {
     components: {
       NodeViewWrapper,
     },
     setup(props) {
+      const mathLiveLoaded = ref(false);
+
+      const loadMathLive = async () => {
+        try {
+          // Dynamic import of mathlive
+          await import(/* webpackChunkName: "mathlive" */ 'mathlive');
+          mathLiveLoaded.value = true;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load MathLive:', error);
+        }
+      };
+
       const openEditor = () => {
         props.editor.emit('open-math-editor', {
           pos: props.getPos(),
@@ -28,7 +49,12 @@
         });
       };
 
+      onMounted(() => {
+        loadMathLive();
+      });
+
       return {
+        mathLiveLoaded,
         openEditor,
       };
     },
@@ -65,11 +91,21 @@
     border: 1px solid #cccccc;
   }
 
+  .math-loading {
+    padding: 2px 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+    background-color: #f5f5f5;
+    border-radius: 2px;
+  }
+
 </style>
 
 
 <style>
 
+  /* These styles will only be applied after mathlive is loaded */
+
   /* https://mathlive.io/mathfield/guides/customizing/#styling */
 
   math-field {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
index ef4c8b5525..d83f6d703f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
@@ -1,4 +1,5 @@
 import { ref, watch } from 'vue';
+import { throttle } from 'lodash';
 import { useBreakpoint } from './useBreakpoint';
 
 export function useModalPositioning() {
@@ -21,6 +22,21 @@ export function useModalPositioning() {
     };
   };
 
+  const handleResize = () => {
+    if (isModalOpen.value) {
+      // Re-evaluate positioning on resize
+      if (isMobile.value && !isModalCentered.value) {
+        setCenteredPosition();
+      } else if (!isMobile.value && anchorElement.value) {
+        updatePosition();
+      }
+    }
+  };
+
+  // Throttle scroll and resize events
+  const throttledUpdatePosition = throttle(updatePosition, 10);
+  const throttledHandleResize = throttle(handleResize, 10);
+
   const setCenteredPosition = () => {
     isModalCentered.value = true;
     anchorElement.value = null;
@@ -63,36 +79,31 @@ export function useModalPositioning() {
       }
     };
 
-    const handleResize = () => {
-      if (isModalOpen.value) {
-        // Re-evaluate positioning on resize
-        if (isMobile.value && !isModalCentered.value) {
-          setCenteredPosition();
-        } else if (!isMobile.value && anchorElement.value) {
-          updatePosition();
-        }
-      }
-    };
-
     watch(isModalOpen, isOpen => {
       if (isOpen) {
         // The timeout prevents the click that opened the modal from immediately closing it.
         setTimeout(() => {
           document.addEventListener('mousedown', clickOutsideHandler, true);
-          window.addEventListener('scroll', updatePosition, true);
-          window.addEventListener('resize', handleResize, true);
+          window.addEventListener('scroll', throttledUpdatePosition, true);
+          window.addEventListener('resize', throttledHandleResize, true);
         }, 0);
       } else {
         document.removeEventListener('mousedown', clickOutsideHandler, true);
-        window.removeEventListener('scroll', updatePosition, true);
-        window.removeEventListener('resize', handleResize, true);
+        window.removeEventListener('scroll', throttledUpdatePosition, true);
+        window.removeEventListener('resize', throttledHandleResize, true);
+        // Cancel any pending throttled calls
+        throttledUpdatePosition.cancel();
+        throttledHandleResize.cancel();
       }
     });
   };
 
   const cleanup = () => {
-    window.removeEventListener('scroll', updatePosition, true);
-    window.removeEventListener('resize', updatePosition, true);
+    window.removeEventListener('scroll', throttledUpdatePosition, true);
+    window.removeEventListener('resize', throttledHandleResize, true);
+    // Cancel any pending throttled calls
+    throttledUpdatePosition.cancel();
+    throttledHandleResize.cancel();
   };
 
   return {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Math.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Math.js
index 73546c81e2..5469073162 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Math.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Math.js
@@ -1,6 +1,6 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import { VueNodeViewRenderer } from '@tiptap/vue-2';
-import MathNodeView from '../components/math/MathNodeView.vue';
+import LazyMathNodeView from '../components/math/LazyMathNodeView.vue';
 
 export const Math = Node.create({
   name: 'math',
@@ -31,7 +31,7 @@ export const Math = Node.create({
   },
 
   addNodeView() {
-    return VueNodeViewRenderer(MathNodeView);
+    return VueNodeViewRenderer(LazyMathNodeView);
   },
 
   addCommands() {