MDL-83673 core_courseformat: optimize pageitem update

The course page employs a scroll spy to highlight the
relevant element in the course index. However, the
frequency of updates is excessively high. This commit add
throttling of the scroll spy and prevents the page item
state from updating if the value hasn’t changed.

course/format/amd/src/local/content.js

@@ -23,7 +23,7 @@
  */
 
 import {BaseComponent} from 'core/reactive';
-import {debounce} from 'core/utils';
+import {throttle, debounce} from 'core/utils';
 import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
 import Config from 'core/config';
 import inplaceeditable from 'core/inplace_editable';
@@ -151,7 +151,7 @@ export default class Component extends BaseComponent {
         this.addEventListener(
             document,
             "scroll",
-            this._scrollHandler
+            throttle(this._scrollHandler.bind(this), 50)
         );
     }
 

course/format/amd/src/local/courseeditor/mutations.js

@@ -579,9 +579,12 @@ export default class {
                 return;
             }
         }
+        const course = stateManager.get('course');
+        if (course.pageItem && course.pageItem.type === type && course.pageItem.id === id) {
+            return;
+        }
         stateManager.setReadOnly(false);
         // Remove the current page item.
-        const course = stateManager.get('course');
         course.pageItem = null;
         // Save the new page item.
         if (newPageItem) {