From b0931adeed16de342264fef1c89ea81be8f27f89 Mon Sep 17 00:00:00 2001 From: Kodiererin Date: Fri, 11 Oct 2024 15:06:36 +0530 Subject: [PATCH 1/3] (Feature) : Adding Loader --- my-app/src/components/Loader.jsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 my-app/src/components/Loader.jsx diff --git a/my-app/src/components/Loader.jsx b/my-app/src/components/Loader.jsx new file mode 100644 index 0000000..dac0def --- /dev/null +++ b/my-app/src/components/Loader.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function Loader() { + return ( +
Loader
+ ) +} From 1024b00d8999a38a7b39ed8f57b516f2981d35b0 Mon Sep 17 00:00:00 2001 From: Kodiererin Date: Fri, 11 Oct 2024 15:09:06 +0530 Subject: [PATCH 2/3] (Feature) : Added a Loader --- my-app/package-lock.json | 14 +++--- my-app/package.json | 3 +- my-app/src/App.jsx | 54 +++++++++++++++--------- my-app/src/assets/images/codex-logo.png | Bin 0 -> 6734 bytes my-app/src/components/Loader.jsx | 50 +++++++++++++++++++--- 5 files changed, 89 insertions(+), 32 deletions(-) create mode 100644 my-app/src/assets/images/codex-logo.png diff --git a/my-app/package-lock.json b/my-app/package-lock.json index ba00db5..dbaab4a 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "@headlessui/react": "^2.1.8", "@wojtekmaj/react-hooks": "^1.21.0", - "framer-motion": "^11.5.6", + "framer-motion": "^11.11.7", + "my-app": "file:", "react": "^18.3.1", "react-dom": "^18.3.1", "react-helmet": "^6.1.0", @@ -3246,10 +3247,9 @@ } }, "node_modules/framer-motion": { - "version": "11.5.6", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz", - "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==", - "license": "MIT", + "version": "11.11.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.7.tgz", + "integrity": "sha512-89CgILOXPeG3L7ymOTGrLmf8IiKubYLUN/QkYgQuLvehAHfqgwJbLfCnhuyRI4WTds1TXkUp67A7IJrgRY/j1w==", "dependencies": { "tslib": "^2.4.0" }, @@ -4594,6 +4594,10 @@ "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==", "license": "MIT" }, + "node_modules/my-app": { + "resolved": "", + "link": true + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", diff --git a/my-app/package.json b/my-app/package.json index b53709b..9991b6a 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -12,7 +12,8 @@ "dependencies": { "@headlessui/react": "^2.1.8", "@wojtekmaj/react-hooks": "^1.21.0", - "framer-motion": "^11.5.6", + "framer-motion": "^11.11.7", + "my-app": "file:", "react": "^18.3.1", "react-dom": "^18.3.1", "react-helmet": "^6.1.0", diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx index 1856ad5..e360134 100644 --- a/my-app/src/App.jsx +++ b/my-app/src/App.jsx @@ -1,4 +1,7 @@ +// src/App.jsx + import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { useState, useEffect } from "react"; import Home from "./pages/Home"; import About from "./pages/About"; import NotFound from "./pages/404"; @@ -7,32 +10,41 @@ import ContactForm from "./pages/Contact"; import Events from "./pages/Events"; import Base from "./layouts/Base"; import Subscribe from "./components/Subscribe"; -import { useState } from "react"; -// import NewsletterPage from "./pages/NewsletterPage"; +import Loader from "./components/Loader"; export default function App() { - const [isVisible, setIsVisible] = useState(false); - - const handleSetVisible = (value)=>{ - setIsVisible(value); - }; + const [isVisible, setIsVisible] = useState(false); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const timer = setTimeout(() => { + setLoading(false); + }, 1500); // I have Adjusted loader time to 1.5 seconds for smoother transition + + return () => clearTimeout(timer); // Cleaning up timer + }, []); + + const handleSetVisible = (value) => setIsVisible(value); return (
- {isVisible&&} - - - - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - - - + {isVisible && } + {loading ? ( + + ) : ( + + + + } /> + } /> + } /> + } /> + } /> + } /> + + + + )}
); } diff --git a/my-app/src/assets/images/codex-logo.png b/my-app/src/assets/images/codex-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..83012d8d329bddccecb40131dedaa26687a7af49 GIT binary patch literal 6734 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 kFo%w(4 { + const [showExplore, setShowExplore] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { + setShowExplore(true); + }, 500); + + return () => clearTimeout(timer); + }, []); -export default function Loader() { return ( -
Loader
- ) -} +
+
+ Logo + +
+ + We Code + + + + We Explore + +
+
+
+ ); +}; + +export default Loader; From 6f07df1aec679ea4430171bdd89d490c9ff8894e Mon Sep 17 00:00:00 2001 From: Kodiererin Date: Sat, 12 Oct 2024 02:03:09 +0530 Subject: [PATCH 3/3] (Feature) : Implemented Suggestions --- my-app/src/App.jsx | 9 ++--- my-app/src/components/Loader.jsx | 65 ++++++++++++++++++-------------- 2 files changed, 39 insertions(+), 35 deletions(-) diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx index e360134..4998d44 100644 --- a/my-app/src/App.jsx +++ b/my-app/src/App.jsx @@ -1,5 +1,3 @@ -// src/App.jsx - import { BrowserRouter, Routes, Route } from "react-router-dom"; import { useState, useEffect } from "react"; import Home from "./pages/Home"; @@ -19,7 +17,7 @@ export default function App() { useEffect(() => { const timer = setTimeout(() => { setLoading(false); - }, 1500); // I have Adjusted loader time to 1.5 seconds for smoother transition + }, 1500); // Adjusted loader time to 1.5 seconds for smoother transition return () => clearTimeout(timer); // Cleaning up timer }, []); @@ -29,9 +27,8 @@ export default function App() { return (
{isVisible && } - {loading ? ( - - ) : ( + + {!loading && ( diff --git a/my-app/src/components/Loader.jsx b/my-app/src/components/Loader.jsx index edd675a..ab243c0 100644 --- a/my-app/src/components/Loader.jsx +++ b/my-app/src/components/Loader.jsx @@ -1,10 +1,8 @@ -// src/components/Loader.jsx - import React, { useEffect, useState } from "react"; -import { motion } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion"; import logo from "../assets/images/codex-logo.png"; -const Loader = () => { +const Loader = ({ loading }) => { const [showExplore, setShowExplore] = useState(false); useEffect(() => { @@ -16,31 +14,40 @@ const Loader = () => { }, []); return ( -
-
- Logo - -
- - We Code - - - - We Explore - -
-
-
+ + {loading && ( + +
+ Logo + +
+ + We Code + + + + We Explore + +
+
+ + )} + ); };