fix(FEC-10811): floating show two bottom bar for second (#599)

Issue: the first event of resize/scroll doesn't take into account.
Solution: trigger the function on the leading edge instead of the trail.

src/utils/debounce.js

@@ -3,6 +3,7 @@
  * This function is built in order to limit the amount of times a function is called in a certain time frame
  * @param {Component} origFunc - the original function to be called
  * @param {Function} time - the time frame to allow only one function call
+ * @param {boolean} immediate - trigger the function on the leading edge, instead of the trailing
  * @returns {Function} the wrapped debounce function
  * @example
  * this.props.eventManager.listen(
@@ -13,13 +14,20 @@
  *  }, ON_WINDOW_RESIZE_DEBOUNCE_DELAY)
  * );
  */
-export const debounce: Function = (origFunc: Function, time: number) => {
+export const debounce: Function = (origFunc: Function, time: number, immediate: boolean = true) => {
   let timeout;
 
   return (...args) => {
+    const context = this;
+    if (immediate && !timeout) {
+      origFunc.apply(context, args);
+    }
     clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      origFunc.apply(this, args);
+    timeout = setTimeout(function () {
+      timeout = null;
+      if (!immediate) {
+        origFunc.apply(context, args);
+      }
     }, time);
   };
 };