use delayed spinner for better ux

components/layout/router-spinner.js

@@ -55,7 +55,7 @@ const RouterSpinner = () => {
     };
   }, []);
 
-  return <Spinner isLoading={isLoading} className="-fixed" />;
+  return <Spinner isLoading={isLoading} className="-fixed" spinDelay={0} />;
 }
 
 export default RouterSpinner;

components/ui/spinner.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { useSpinDelay } from 'spin-delay';
 
-export default function Spinner({ isLoading, className }) {
+export default function Spinner({ isLoading, className, spinDelay = 500, spinMinDuration = 300 }) {
   const classNames = classnames({
     [className]: !!className,
-    '-loading': isLoading
   });
+  const showSpinner = useSpinDelay(isLoading, { delay: spinDelay, minDuration: spinMinDuration, ssr: false });
+
+  if (!showSpinner) return null;
 
   return (
     <div className={`c-spinner ${classNames}`}>
@@ -19,5 +22,7 @@ export default function Spinner({ isLoading, className }) {
 
 Spinner.propTypes = {
   className: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  spinDelay: PropTypes.number,
+  spinMinDuration: PropTypes.number
 };

css/components/ui/_spinner.scss

@@ -8,8 +8,6 @@ $spinner-tiny-size: 20px;
   bottom: 0;
   left: 0;
   background: rgba($color-white, .75);
-  visibility: hidden;
-  opacity: 0;
   z-index: 1000;
 
   > .spinner-box {
@@ -58,12 +56,6 @@ $spinner-tiny-size: 20px;
     }
   }
 
-  // State
-  &.-loading {
-    visibility: visible;
-    opacity: 1;
-  }
-
   // Colors
   &.-transparent { background: rgba($color-white, 0); }
 }

package.json

@@ -48,6 +48,7 @@
     "redux-thunk": "^2.1.0",
     "reselect": "^4.1.8",
     "slugify": "^1.4.0",
+    "spin-delay": "^2.0.1",
     "viewport-mercator-project": "6.1.1",
     "vizzuality-components": "^3.0.3"
   },

yarn.lock

@@ -5283,6 +5283,11 @@ source-map@^0.5.7:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
+spin-delay@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/spin-delay/-/spin-delay-2.0.1.tgz#f8b622c785b09839749e8f01046de1a0f0b0cb48"
+  integrity sha512-ilggKXKqAMwk21PSYvxuF/KCnrsGFDrnO6mXa629mj8fvfo+dOQfubDViqsRjRX5U1jd3Xb8FTsV+m4Tg7YeUg==
+
 stacktrace-parser@^0.1.10:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"