From c298a6cd69cd1f2334b89a39494412b25e978162 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 4 May 2019 22:48:40 +0100
Subject: [PATCH] fix(ui): delay initial fetch until browser is idle

Right now the very fist fetch() happens right after Fetcher instance is created, which might be while a lot of other components are still being created. Wrap it inside requestAnimationFrame so it's executed once the browser is (fairly) idle
---
 ui/src/Components/Fetcher/index.js      | 3 ++-
 ui/src/Components/Fetcher/index.test.js | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/Fetcher/index.js b/ui/src/Components/Fetcher/index.js
index 53e0e1896..acaae31bd 100644
--- a/ui/src/Components/Fetcher/index.js
+++ b/ui/src/Components/Fetcher/index.js
@@ -54,7 +54,8 @@ const Fetcher = observer(
     };
 
     componentDidMount() {
-      this.fetchIfIdle();
+      // start first fetch once the browser is done doing busy loading
+      window.requestAnimationFrame(this.fetchIfIdle);
       this.timer = setInterval(this.timerTick, 1000);
     }
 
diff --git a/ui/src/Components/Fetcher/index.test.js b/ui/src/Components/Fetcher/index.test.js
index 365381f5e..9b3507558 100644
--- a/ui/src/Components/Fetcher/index.test.js
+++ b/ui/src/Components/Fetcher/index.test.js
@@ -29,9 +29,12 @@ beforeEach(() => {
 
   settingsStore = new Settings();
   settingsStore.fetchConfig.config.interval = 30;
+
+  jest.spyOn(window, "requestAnimationFrame").mockImplementation(cb => cb());
 });
 
 afterEach(() => {
+  window.requestAnimationFrame.mockRestore();
   jest.clearAllTimers();
   jest.clearAllMocks();
   jest.restoreAllMocks();