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

@@ -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);
     }
 

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();