Lazy loaded demo UI

Author: aeagle

demo/src/App.scss

@@ -77,6 +77,25 @@ pre {
 	font-size: 18px !important;
 }
 
+::-webkit-scrollbar{
+	width: 5px;
+}
+
+::-webkit-scrollbar-track-piece{
+	background-color: #FFF;
+}
+
+::-webkit-scrollbar-thumb{
+	background-color: #CBCBCB;
+	outline: 2px solid #FFF;
+	outline-offset: -2px;
+	border: .1px solid #B7B7B7;
+}
+
+::-webkit-scrollbar-thumb:hover{
+	background-color: #909090;
+}
+
 @media (max-width: 800px)
 {
 	pre {

demo/src/App.tsx

@@ -1,19 +1,21 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import './App.scss';
 import ReactGA from 'react-ga';
 import { Docs } from './docs/Docs';
-import { UI } from './ui-demo/UI';
 
 ReactGA.initialize("UA-144490437-1");
 ReactGA.pageview(window.location.pathname + window.location.search);
 
 const App: React.FC = () => {
   if (window.location.hash === "#ui-demo")
   {
-    return <UI />
+    const UI = React.lazy(() => import('./ui-demo/UI').then(({ UI }) => ({ default: UI })));
+    return <Suspense fallback={<Loading />}><UI /></Suspense>
   }
 
   return <Docs />
 }
 
+const Loading = () => (<span />)
+
 export default App;