refactor(listbox): make scrollbars prettier and consistent across bro…

…wsers and add a scroll timeout option (#814)

* fix: trim space when parsing engine URLs

* refactor: generic scrollbar style and timeout opt

* refactor: set timeout to 500 to prevent api breaks

* refactor: hardcode scrollTimeout at this point

* docs: revert docs changes

Co-authored-by: Johan Lahti <bjr@qlik.com>

apis/nucleus/src/components/listbox/ListBox.jsx

@@ -4,13 +4,42 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
+import { makeStyles } from '@nebula.js/ui/theme';
 
 import useLayout from '../../hooks/useLayout';
 
 import useSelectionsInteractions from './useSelectionsInteractions';
 
 import RowColumn from './ListBoxRowColumn';
 
+const scrollBarThumb = '#BBB';
+const scrollBarThumbHover = '#555';
+const scrollBarBackground = '#f1f1f1';
+
+const useStyles = makeStyles(() => ({
+  styledScrollbars: {
+    scrollbarColor: `${scrollBarThumb} ${scrollBarBackground}`,
+
+    '&::-webkit-scrollbar': {
+      width: 10,
+      height: 10,
+    },
+
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: scrollBarBackground,
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: scrollBarThumb,
+      borderRadius: '1rem',
+    },
+
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: scrollBarThumbHover,
+    },
+  },
+}));
+
 function getSizeInfo({ isVertical, checkboxes, dense, height }) {
   let sizeVertical = checkboxes ? 40 : 33;
   if (dense) {
@@ -45,6 +74,7 @@ export default function ListBox({
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const [pages, setPages] = useState(null);
   const [isLoadingData, setIsLoadingData] = useState(false);
+  const styles = useStyles();
   const {
     instantPages = [],
     interactionEvents,
@@ -82,6 +112,9 @@ export default function ListBox({
     [layout, pages]
   );
 
+  // The time from scroll end until new data is being fetched, may be exposed in API later on.
+  const scrollTimeout = 0;
+
   const loadMoreItems = useCallback(
     (startIndex, stopIndex) => {
       local.current.queue.push({
@@ -118,7 +151,7 @@ export default function ListBox({
                 resolve();
               });
           },
-          isScrolling ? 500 : 0
+          isScrolling ? scrollTimeout : 0
         );
       });
     },
@@ -185,6 +218,7 @@ export default function ListBox({
             width={width}
             itemCount={count}
             layout={listLayout}
+            className={styles.styledScrollbars}
             itemData={{
               isLocked,
               column: !isVertical,