--- a/devtools/client/netmonitor/src/components/request-list-header.js
+++ b/devtools/client/netmonitor/src/components/request-list-header.js
@@ -82,19 +82,19 @@ const RequestListHeader = createClass({
     this.background.draw(props);
   },
 
   resizeWaterfall() {
     let waterfallHeader = this.refs.waterfallHeader;
     if (waterfallHeader) {
       // Measure its width and update the 'waterfallWidth' property in the store.
       // The 'waterfallWidth' will be further updated on every window resize.
-      setTimeout(() => {
-        this.props.resizeWaterfall(waterfallHeader.getBoundingClientRect().width);
-      }, 500);
+      window.cancelIdleCallback(this._resizeTimerId);
+      this._resizeTimerId = window.requestIdleCallback(() =>
+        this.props.resizeWaterfall(waterfallHeader.getBoundingClientRect().width));
     }
   },
 
   render() {
     let { columns, scale, sort, sortBy, waterfallWidth } = this.props;
 
     return (
       div({ className: "devtools-toolbar requests-list-headers" },