Skip to content

Commit

Permalink
Merge pull request #515 from MeetDOD/issue-412
Browse files Browse the repository at this point in the history 
Feat: Added preloader in style share successfully issue 412
  • Loading branch information
@Ultimateutkarsh11
Ultimateutkarsh11 authored Jul 27, 2024
2 parents d155ae3 + e15a84a commit ed8d531
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 119 deletions.
248 changes: 130 additions & 118 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./App.css";
import React, { useState, useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
Expand All @@ -10,8 +10,6 @@ import NewPost from "./pages/NewPost";
import NonAuthenticatedRoute from "./components/NonAuthenticatedRoute";
import AuthenticatedRoute from "./components/AuthenticatedRoute";
import Profile from "./pages/Profile";
import React from "react";
import Loader from "./components/Loader";
import ContactUs from "./pages/ContactUs";
import About from "./pages/About";
import Policy from "./pages/Policy";
Expand All @@ -23,7 +21,7 @@ import LeaderBoard from "./pages/LeaderBoard";
import CustomizeWithAi from "./pages/CustomizeWithAi";
import ScrollToTopWhenRouteChanges from "./components/ScrollToTopWhenRouteChanges";
import ShowProfile from "./pages/ShowProfile";
import { Tooltip } from 'react-tooltip'
import { Tooltip } from 'react-tooltip';
import EditPost from "./pages/EditPost";
import useTheme from './hooks/useTheme';
import CodeEditor from "./pages/CodeEditor";
Expand All @@ -32,136 +30,150 @@ import userBlock from "./hooks/userBlock";
import Blocked from "./pages/Blocked";
import GoogleTranslate from "./components/GoogleTranslate";
import ProgressScrollDown from "./components/ProgressScrollDown";
import Preloader from "./components/PreLoader";
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

function App() {
const { theme, toggleTheme } = useTheme();
const { loading, isBlocked } = userBlock(5);
const [isPreloaderVisible, setIsPreloaderVisible] = useState(true);

useEffect(() => {
const timer = setTimeout(() => {
setIsPreloaderVisible(false);
}, 5000);
return () => clearTimeout(timer);
}, []);

if (loading) {
return <Loader />;
return <Preloader/>;
}

if (isBlocked) {
return <Blocked />;
}

return (
<BrowserRouter>
<React.Suspense fallback={<Loader />}>
<GoTop />
<ProgressScrollDown />
<div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
<Navbar theme={theme} toggleTheme={toggleTheme} />
<ScrollToTopWhenRouteChanges />
<div className="min-h-[80vh] pt-20">
<div className="ml-2 fixed z-40">
<GoogleTranslate/>
<>
{isPreloaderVisible && <Preloader />}
{!isPreloaderVisible && (
<BrowserRouter>
<React.Suspense>
<GoTop />
<ProgressScrollDown />
<div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
<Navbar theme={theme} toggleTheme={toggleTheme} />
<ScrollToTopWhenRouteChanges />
<div className="min-h-[80vh] pt-20">
<div className="ml-2 fixed z-40">
<GoogleTranslate/>
</div>
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
<Route path="/app/posts" element={<Posts />} />
<Route path="/app/contributors" element={<Contributors />} />
<Route path="/app/profile/:id" element={<ShowProfile />} />
<Route
path="/app/signin"
element={
<NonAuthenticatedRoute>
<LoginForm defaultFormType="Signin" />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/signup"
element={
<NonAuthenticatedRoute>
<LoginForm defaultFormType="SignUp" />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/new-post"
element={
<AuthenticatedRoute>
<NewPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/posts/edit/:id"
element={
<AuthenticatedRoute>
<EditPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/profile"
element={
<AuthenticatedRoute>
<Profile />
</AuthenticatedRoute>
}
/>
<Route
path="/app/fav"
element={
<AuthenticatedRoute>
<Favorite />
</AuthenticatedRoute>
}
/>
<Route
path="/app/customize-with-ai/:id"
element={
<AuthenticatedRoute>
<CustomizeWithAi />
</AuthenticatedRoute>
}
/>
<Route
path="/app/leaderboard"
element={
<LeaderBoard />
}
/>
<Route
path="/app/code"
element={
<AuthenticatedRoute>
<CodeEditor />
</AuthenticatedRoute>
}
/>
<Route
path="/app/contact-us"
element={
<ContactUs />
}
/>
<Route
path="/app/about"
element={
<About />
}
/>
<Route
path="/app/policy"
element={
<Policy />
}
/>
<Route path="*" element={<PageNotFound />} />
</Routes>
</div>
<Footer />
</div>
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
<Route path="/app/posts" element={<Posts />} />
<Route path="/app/contributors" element={<Contributors />} />
<Route path="/app/profile/:id" element={<ShowProfile />} />
<Route
path="/app/signin"
element={
<NonAuthenticatedRoute>
<LoginForm defaultFormType="Signin" />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/signup"
element={
<NonAuthenticatedRoute>
<LoginForm defaultFormType="SignUp" />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/new-post"
element={
<AuthenticatedRoute>
<NewPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/posts/edit/:id"
element={
<AuthenticatedRoute>
<EditPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/profile"
element={
<AuthenticatedRoute>
<Profile />
</AuthenticatedRoute>
}
/>
<Route
path="/app/fav"
element={
<AuthenticatedRoute>
<Favorite />
</AuthenticatedRoute>
}
/>
<Route
path="/app/customize-with-ai/:id"
element={
<AuthenticatedRoute>
<CustomizeWithAi />
</AuthenticatedRoute>
}
/>
<Route
path="/app/leaderboard"
element={
<LeaderBoard />
}
/>
<Route
path="/app/code"
element={
<AuthenticatedRoute>
<CodeEditor />
</AuthenticatedRoute>
}
/>
<Route
path="/app/contact-us"
element={
<ContactUs />
}
/>
<Route
path="/app/about"
element={
<About />
}
/>
<Route
path="/app/policy"
element={
<Policy />
}
/>
<Route path="*" element={<PageNotFound />} />
</Routes>
</div>
<Footer />
</div>
</React.Suspense>
<Tooltip id="my-tooltip" place='right' style={{backgroundColor:"#00AAFF",color:'#fff',fontSize:'15px'}} />
<Toaster />
</BrowserRouter>
</React.Suspense>
<Tooltip id="my-tooltip" place='right' style={{backgroundColor:"#00AAFF",color:'#fff',fontSize:'15px'}} />
<Toaster />
</BrowserRouter>
)}
</>
);
}

Expand Down
15 changes: 15 additions & 0 deletions frontend/src/components/PreLoader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import "../index.css"

const Preloader = () => {
return (
<div className="fixed top-0 left-0 w-full h-full flex justify-center items-center z-50">
<svg viewBox="0 0 1320 300">
<text x="50%" y="50%" dy=".35em" textAnchor="middle" className="uppercase animate-stroke">
style share
</text>
</svg>
</div>
);
}

export default Preloader;
47 changes: 46 additions & 1 deletion frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,47 @@
cursor-none;
}

@layer components {
.animate-stroke {
text-transform: uppercase;
animation: stroke 2.5s infinite alternate;
stroke-width: 5;
stroke: white;
font-size: 80px;
font-family: "Arial", sans-serif;
}
}

@keyframes stroke {
0% {
fill: rgba(255, 255, 255, 0);
stroke: rgb(56 189 248);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 2;
}

70% {
fill: rgba(255, 255, 255, 0);
stroke: rgb(56 189 248);
}

80% {
fill: rgba(255, 255, 255, 0);
stroke: rgb(56 189 248);
stroke-width: 3;
}

100% {
fill: cyan;
stroke: rgba(0, 64, 128, 0);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0;
text-shadow: 0 0 10px gray, 0 0 15px whitesmoke;
}
}

body {
width: 100%;
height: 100vh;
Expand All @@ -24,7 +65,11 @@ body {
height: 25px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(206, 251, 255, 0.3), rgba(3, 37, 255, 0.3));
background: radial-gradient(
circle,
rgba(206, 251, 255, 0.3),
rgba(3, 37, 255, 0.3)
);
transition: transform 0.1s, left 0.1s, top 0.1s;
}

Expand Down

0 comments on commit ed8d531

Please sign in to comment.