loading example

binshadcs · May 12, 2021 · 924f303 · 924f303
1 parent 2195144
commit 924f303
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 74 deletions.
diff --git a/public/data/tracks.json b/public/data/tracks.json
@@ -67,21 +67,21 @@
   {
     "index": 13,
     "id": "hQ3-RN3LKvA",
-    "name": "Dark Minimal Techno Trip Live Radio 24/7 Dark Monkey Music"
+    "name": "Dark Minimal Techno Trip Live Radio"
   },
   {
     "index": 14,
     "id": "VfW86fnQL5w",
-    "name": "【24/7 CHILL LOFI HIP HOP RADIO】beats to sleep/relax/study to"
+    "name": "24/7 CHILL LOFI HIP HOP RADIO beats to sleep/relax/study to"
   },
   {
     "index": 15,
     "id": "qt_urUz42vI",
-    "name": "【Ambient Music For Maximum Concentration — Infinity Radio"
+    "name": "Ambient Music For Maximum Concentration — Infinity Radio"
   },
   {
     "index": 16,
     "id": "gfiPOgsNO2M",
-    "name": "Art of Techno 'Deep' Radio - Melodic - Progressive • House - Dj Mixes Live 24/7"
+    "name": "Art of Techno 'Deep' Radio"
   }
 ]
diff --git a/src/Routes.js b/src/Routes.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 // react router
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
@@ -10,7 +10,7 @@ import Base from "./Base";
 import "animate.css/animate.css";
 
 // components & core
-import { YTwrapper } from "./components";
+import { Loader, YTwrapper } from "./components";
 import {
   Chat,
   Home,
@@ -77,74 +77,76 @@ const Routes = () => {
 
   // routing for all routes
   return (
-    <Router>
-      <div className="custom-cursor">
-        <Base
-          isFullScreen={isFullScreen}
-          setIsFullScreen={setIsFullScreen}
-          bgGif={bgGif}
-          setBgGif={setBgGif}
-        >
-          <div className="absolute top-0 left-0 invisible -z-10">
-            {id && (
-              <YTwrapper
-                videoId={id}
-                paused={paused}
-                volume={volume / 100}
-                muted={muted}
-                onBuffering={onBuffering}
-                onPlaying={onPlaying}
-              />
-            )}
-          </div>
-          <Switch>
-            <Route path="/" exact>
-              <Home
-                id={id}
-                name={name}
-                volume={volume}
-                setVolume={setVolume}
-                setPaused={setPaused}
-                paused={paused}
-                fetchVideo={fetchVideo}
-                muted={muted}
-                buffering={buffering}
-                toggleMute={toggleMute}
-                isFullScreen={isFullScreen}
-                setIsFullScreen={setIsFullScreen}
-                setBgGif={setBgGif}
-              />
-            </Route>
-            <Route path="/tracks" exact>
-              <Tracks
-                fetchVideo={fetchVideo}
-                staredMusic={staredMusic}
-                setStaredMusic={setStaredMusic}
-              />
-            </Route>
-            <Route path="/todo" exact>
-              <TodoList fetchVideo={fetchVideo} />
-            </Route>
-            <Route path="/pomodoro" exact>
-              <Pomodoro />
-            </Route>
-            <Route path="/chat" exact>
-              <Chat />
-            </Route>
-            <Route path="/keyboard-shortcuts" exact>
-              <KeyboardShortcuts />
-            </Route>
-            <Route path="/stared" exact>
-              <StaredMusic
-                fetchVideo={fetchVideo}
-                staredMusic={staredMusic}
-                setStaredMusic={setStaredMusic}
-              />
-            </Route>
-          </Switch>
-        </Base>
-      </div>
-    </Router>
+    <Suspense fallback={<Loader />}>
+      <Router>
+        <div className="custom-cursor">
+          <Base
+            isFullScreen={isFullScreen}
+            setIsFullScreen={setIsFullScreen}
+            bgGif={bgGif}
+            setBgGif={setBgGif}
+          >
+            <div className="absolute top-0 left-0 invisible -z-10">
+              {id && (
+                <YTwrapper
+                  videoId={id}
+                  paused={paused}
+                  volume={volume / 100}
+                  muted={muted}
+                  onBuffering={onBuffering}
+                  onPlaying={onPlaying}
+                />
+              )}
+            </div>
+            <Switch>
+              <Route path="/" exact>
+                <Home
+                  id={id}
+                  name={name}
+                  volume={volume}
+                  setVolume={setVolume}
+                  setPaused={setPaused}
+                  paused={paused}
+                  fetchVideo={fetchVideo}
+                  muted={muted}
+                  buffering={buffering}
+                  toggleMute={toggleMute}
+                  isFullScreen={isFullScreen}
+                  setIsFullScreen={setIsFullScreen}
+                  setBgGif={setBgGif}
+                />
+              </Route>
+              <Route path="/tracks" exact>
+                <Tracks
+                  fetchVideo={fetchVideo}
+                  staredMusic={staredMusic}
+                  setStaredMusic={setStaredMusic}
+                />
+              </Route>
+              <Route path="/todo" exact>
+                <TodoList fetchVideo={fetchVideo} />
+              </Route>
+              <Route path="/pomodoro" exact>
+                <Pomodoro />
+              </Route>
+              <Route path="/chat" exact>
+                <Chat />
+              </Route>
+              <Route path="/keyboard-shortcuts" exact>
+                <KeyboardShortcuts />
+              </Route>
+              <Route path="/stared" exact>
+                <StaredMusic
+                  fetchVideo={fetchVideo}
+                  staredMusic={staredMusic}
+                  setStaredMusic={setStaredMusic}
+                />
+              </Route>
+            </Switch>
+          </Base>
+        </div>
+      </Router>
+    </Suspense>
   );
 };
 

diff --git a/src/components/Loader.js b/src/components/Loader.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Loader = () => {
+  return <div className="bg-gray-900 text-white h-screen">Loading</div>;
+};
+
+export default Loader;
diff --git a/src/components/index.js b/src/components/index.js
@@ -5,3 +5,4 @@ export { default as Track } from "./Track";
 export { default as Todo } from "./Todo";
 export { default as Channel } from "./Channel";
 export { default as Message } from "./Message";
+export { default as Loader } from "./Loader";
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -910,6 +910,10 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
 }
+.bg-gray-900 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
+}
 .bg-gradient-to-r {
 	background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }