fixed an issue with initialization process

Author: nitin42

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-perf-devtool",
-  "version": "3.0.8",
+  "version": "3.1.8-beta.1",
   "description": "A devtool for inspecting the performance of React Components",
   "main": "index.js",
   "types": "index.d.ts",

src/extension/components/ReactPerfDevtool.js

@@ -19,13 +19,18 @@ let queries = {
   measures: 'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE__.measures)',
   rawMeasures:
     'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE__.rawMeasures)',
+  getTimeoutValue:
+    'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE__.timeout)',
   clear: `__REACT_PERF_DEVTOOL_GLOBAL_STORE__ = {
           length: 0,
           measures: [],
           rawMeasures: [],
+          timeout: __REACT_PERF_DEVTOOL_GLOBAL_STORE__.timeout
         }`
 }
 
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
 /**
   This is the main component that renders the table, containing information about
   the component mount/render/update/unmount time and also lifecycle time.
@@ -67,8 +72,26 @@ export class ReactPerfDevtool extends React.Component {
   componentDidMount() {
     this.setState({ loading: true, showChart: true })
 
-    // Get the total measures and flush them if the store is empty.
-    this.timer = setInterval(() => this.getMeasuresLength(), 2000)
+    // Defer the initialization of the extension until the application loads. Why ?
+    // Because some of the applications may be huge in size and take a lot of time to load.
+    // If the extension initialization process kicks-in before the app loads, we are trapped inside the error state.
+    // With this, users can configure a timeout value for initialization of the extension using the observer hook
+    // Default value for the timeout is 2 sec.
+
+    // We need to resolve the promise after one sec. to make sure we have the updated __REACT_PERF_DEVTOOL_GLOBAL_STORE__ object otherwise we might end up with null
+    sleep(1000).then(res => {
+      this.evaluate(queries['getTimeoutValue'], (timeout, err) => {
+        if (err) {
+          this.setErrorState()
+          return
+        }
+
+        this.timer = setInterval(
+          () => this.getMeasuresLength(),
+          JSON.parse(timeout)
+        )
+      })
+    })
   }
 
   componentWillUnmount() {

src/npm/hook.js

@@ -34,7 +34,7 @@ const registerObserver = (params, callback) => {
 
   // TODO: Is there any way to polyfill this API ?
   if (window.PerformanceObserver) {
-    const { shouldLog, port, components } = params
+    const { shouldLog, port, components, timeout = 2000 } = params
 
     let observer = new window.PerformanceObserver(list => {
       const measures = generateDataFromMeasures(
@@ -47,6 +47,7 @@ const registerObserver = (params, callback) => {
 
       window.__REACT_PERF_DEVTOOL_GLOBAL_STORE__ = {
         measures,
+        timeout,
         length: list.getEntries().length,
         rawMeasures: list.getEntries()
       }