perf: do breadcrumb ellipsis calc in a requestIdleCallback

if we do a bunch of work, only do the breadcrumb resizing at the end. And only schedule one Test plan: * if you look a page load profile you should only see the code For resizing the breadcrumbs run once * resizing the page should feel faster and less janky Change-Id: Ibdfc157000810199d07790b51a0bba41af272950 Reviewed-on: https://gerrit.instructure.com/213154 Tested-by: Jenkins Reviewed-by: Clay Diffrient <[email protected]> QA-Review: Ryan Shaw <[email protected]> Product-Review: Ryan Shaw <[email protected]>
ralacas · Oct 15, 2019 · 5e6d3fc · 5e6d3fc
1 parent 8c33bee
commit 5e6d3fc
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/public/javascripts/instructure.js b/public/javascripts/instructure.js
@@ -271,20 +271,24 @@ $(function() {
     let addedEllipsisClass = false
     // if we ever change the styling of the breadcrumbs so their height changes, change this too. the * 1.5 part is just in case to ever handle any padding or margin.
     const hightOfOneBreadcrumb = 27 * 1.5
+    let taskID
 
     const resizeBreadcrumb = () => {
-      let maxWidth = 500
-      $breadcrumbEllipsis = $breadcrumbEllipsis || $breadcrumbs.find('.ellipsible')
-      $breadcrumbEllipsis.ifExists(() => {
-        $breadcrumbEllipsis.css('maxWidth', '')
-        for (let i = 0; $breadcrumbs.height() > hightOfOneBreadcrumb && i < 20; i++) {
-          // the i here is just to make sure we don't get into an ifinite loop somehow
-          if (!addedEllipsisClass) {
-            addedEllipsisClass = true
-            $breadcrumbEllipsis.addClass('ellipsis')
+      if (taskID) (cancelIdleCallback || cancelAnimationFrame)(taskID)
+      taskID = (requestIdleCallback || requestAnimationFrame)(() => {
+        let maxWidth = 500
+        $breadcrumbEllipsis = $breadcrumbEllipsis || $breadcrumbs.find('.ellipsible')
+        $breadcrumbEllipsis.ifExists(() => {
+          $breadcrumbEllipsis.css('maxWidth', '')
+          for (let i = 0; $breadcrumbs.height() > hightOfOneBreadcrumb && i < 20; i++) {
+            // the i here is just to make sure we don't get into an ifinite loop somehow
+            if (!addedEllipsisClass) {
+              addedEllipsisClass = true
+              $breadcrumbEllipsis.addClass('ellipsis')
+            }
+            $breadcrumbEllipsis.css('maxWidth', (maxWidth -= 20))
           }
-          $breadcrumbEllipsis.css('maxWidth', (maxWidth -= 20))
-        }
+        })
       })
     }
     resizeBreadcrumb() // force it to run once right now