From 5dab8a6e0df254a5e56156abc17ce08d4548cb00 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 2 Oct 2018 11:20:51 -0400
Subject: [PATCH] Bug 1494162 - Part 32: Lazy load Grid components. r=pbro

---
 .../client/inspector/grids/components/Grid.js     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/devtools/client/inspector/grids/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js
index fd08af3168fd..3d6f404124b6 100644
--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -9,9 +9,18 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
 
-const GridDisplaySettings = createFactory(require("./GridDisplaySettings"));
-const GridList = createFactory(require("./GridList"));
-const GridOutline = createFactory(require("./GridOutline"));
+// Normally, we would only lazy load GridOutline, but we also lazy load
+// GridDisplaySettings and GridList because we assume the CSS grid usage is low
+// and usually will not appear on the page.
+loader.lazyGetter(this, "GridDisplaySettings", function() {
+  return createFactory(require("./GridDisplaySettings"));
+});
+loader.lazyGetter(this, "GridList", function() {
+  return createFactory(require("./GridList"));
+});
+loader.lazyGetter(this, "GridOutline", function() {
+  return createFactory(require("./GridOutline"));
+});
 
 const Types = require("../types");