diff --git a/app/components/Loading.tsx b/app/components/Loading.tsx new file mode 100644 index 0000000..2abe477 --- /dev/null +++ b/app/components/Loading.tsx @@ -0,0 +1,23 @@ +export default function Loading() { + return ( +
+ + Loading... +
+ ); +} diff --git a/app/login/page.tsx b/app/login/page.tsx index fd8067f..41dc3c9 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -11,6 +11,7 @@ import { useRouter } from "next/navigation"; var crypto = require("crypto"); import { setCookie } from "cookies-next"; import { NavTransition } from "../components/navbar/NavTransition"; +import Loading from "../components/Loading"; export default function LoginPage() { const router = useRouter(); @@ -49,6 +50,7 @@ export default function LoginPage() { theme: "light", transition: Slide, }); + const [loading, setLoading] = useState(false); async function loginHandler(e: React.FormEvent) { e.preventDefault(); @@ -70,6 +72,7 @@ export default function LoginPage() { username: username, password: hashedPassword, }); + setLoading(true); } catch (err: any) { results = err.response; } @@ -146,7 +149,13 @@ export default function LoginPage() {

Don't have an account?{" "} diff --git a/app/portfolio/sections/Networth.tsx b/app/portfolio/sections/Networth.tsx index 6bc7994..98527db 100644 --- a/app/portfolio/sections/Networth.tsx +++ b/app/portfolio/sections/Networth.tsx @@ -103,7 +103,7 @@ export default function Networth(props: any) {

- {profitDetails?.overallProfit > 0 ? ( + {profitDetails?.overallProfit >= 0 ? ( {" "} +{profitDetails?.overallProfit.toFixed(2)}{" "} diff --git a/app/signup/page.tsx b/app/signup/page.tsx index d827111..6cf1d35 100644 --- a/app/signup/page.tsx +++ b/app/signup/page.tsx @@ -8,6 +8,7 @@ var crypto = require("crypto"); import { Slide, ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import { NavTransition } from "../components/navbar/NavTransition"; +import Loading from "../components/Loading"; const notifySuccess = (message: string) => toast.success(message, { @@ -39,6 +40,8 @@ export default function SignUpPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [loading, setLoading] = useState(false); + async function handleFormSubmit(e: React.FormEvent) { e.preventDefault(); if (username === "" || email === "" || password === "") { @@ -57,11 +60,14 @@ export default function SignUpPage() { .digest("hex"); let results; try { + setLoading(true); + results = await axios.post(`${apiURL}/register`, { username: username, email: email, password: hashedPassword, }); + setLoading(false); } catch (err: any) { results = err.response; } @@ -139,9 +145,15 @@ export default function SignUpPage() { onChange={(e) => setPassword(e.target.value)} />
-
+

Already have an account?{" "} diff --git a/app/stocks/[...symbol]/components/handlers/BuyPopup.tsx b/app/stocks/[...symbol]/components/handlers/BuyPopup.tsx index bf26bd8..abe2bd9 100644 --- a/app/stocks/[...symbol]/components/handlers/BuyPopup.tsx +++ b/app/stocks/[...symbol]/components/handlers/BuyPopup.tsx @@ -1,4 +1,5 @@ import { apiURL } from "@/app/components/apiURL"; +import Loading from "@/app/components/Loading"; import axios from "axios"; import { getCookie } from "cookies-next"; import { useState } from "react"; @@ -45,6 +46,7 @@ export default function BuyPopup(props: any) { return; } } + const [loading, setLoading] = useState(false); async function handleBuy(e: any) { e.preventDefault(); @@ -63,6 +65,7 @@ export default function BuyPopup(props: any) { quantity: quantity, }, }); + setLoading(false); } catch (err: any) { results = err.response; } @@ -100,7 +103,13 @@ export default function BuyPopup(props: any) {

diff --git a/app/stocks/[...symbol]/components/handlers/SellPopup.tsx b/app/stocks/[...symbol]/components/handlers/SellPopup.tsx index de68d2d..d3eed55 100644 --- a/app/stocks/[...symbol]/components/handlers/SellPopup.tsx +++ b/app/stocks/[...symbol]/components/handlers/SellPopup.tsx @@ -1,4 +1,5 @@ import { apiURL } from "@/app/components/apiURL"; +import Loading from "@/app/components/Loading"; import axios from "axios"; import { getCookie } from "cookies-next"; import { useState } from "react"; @@ -43,6 +44,7 @@ export default function SellPopup(props: any) { return; } } + const [loading, setLoading] = useState(false); async function handleSell(e: any) { e.preventDefault(); @@ -61,6 +63,7 @@ export default function SellPopup(props: any) { quantity: quantity, }, }); + setLoading(false); } catch (err: any) { results = err.response; } @@ -97,7 +100,13 @@ export default function SellPopup(props: any) {
diff --git a/app/stocks/[...symbol]/components/sections/BuySellWatch.tsx b/app/stocks/[...symbol]/components/sections/BuySellWatch.tsx index 6917ac6..8913fa3 100644 --- a/app/stocks/[...symbol]/components/sections/BuySellWatch.tsx +++ b/app/stocks/[...symbol]/components/sections/BuySellWatch.tsx @@ -5,6 +5,7 @@ import { apiURL } from "@/app/components/apiURL"; import axios from "axios"; import { toast, Slide } from "react-toastify"; import { getCookie } from "cookies-next"; +import { useState } from "react"; export default function BuySellWatch(props: any) { let symbol = props.symbol || ""; diff --git a/app/stocks/[...symbol]/page.tsx b/app/stocks/[...symbol]/page.tsx index 4c8e82f..d0ba957 100644 --- a/app/stocks/[...symbol]/page.tsx +++ b/app/stocks/[...symbol]/page.tsx @@ -10,6 +10,7 @@ import Link from "next/link"; import LTP from "./components/sections/LTP"; import Stats from "./components/sections/Statistics/Stats"; import BuySellWatch from "./components/sections/BuySellWatch"; +import Loading from "@/app/components/Loading"; export const runtime = "edge"; export default function Page({ params, @@ -55,6 +56,8 @@ export default function Page({ items: [], }, }); + const [loading, setLoading] = useState(true); + useEffect(() => { async function getStockData() { let data; @@ -62,6 +65,7 @@ export default function Page({ data = await axios.post(`${apiURL}/getStockQuote`, { symbol: btoa(decodeURIComponent(symbol)), }); + setLoading(false); } catch (err) { console.error(err); } @@ -121,13 +125,19 @@ export default function Page({
- + {loading ? ( +
+ +
+ ) : ( + + )}
@@ -142,33 +152,45 @@ export default function Page({ />
- + {loading ? ( +
+ +
+ ) : ( + + )}
- + {loading ? ( +
+ +
+ ) : ( + + )}
diff --git a/app/topmovers/page.tsx b/app/topmovers/page.tsx index 8ba0932..608f492 100644 --- a/app/topmovers/page.tsx +++ b/app/topmovers/page.tsx @@ -7,6 +7,7 @@ import TopVolume from "./components/sections/TopVolume"; import axios from "axios"; import { apiURL } from "../components/apiURL"; import { NavTransition } from "../components/navbar/NavTransition"; +import Loading from "../components/Loading"; export default function TopMovers() { const [topMovers, setTopMovers] = useState({ @@ -21,6 +22,8 @@ export default function TopMovers() { }, }); + const [loading, setLoading] = useState(true); + useEffect(() => { async function getTopMoverData() { let data; @@ -28,6 +31,7 @@ export default function TopMovers() { data = await axios.post(`${apiURL}/topmovers`, { size: 10, }); + setLoading(false); } catch (err) { console.error(err); } @@ -87,15 +91,21 @@ export default function TopMovers() {
-
- {display === "Gainers" ? ( - - ) : display === "Losers" ? ( - - ) : ( - - )} -
+ {loading ? ( +
+ +
+ ) : ( +
+ {display === "Gainers" ? ( + + ) : display === "Losers" ? ( + + ) : ( + + )} +
+ )} ); } diff --git a/app/watchlist/page.tsx b/app/watchlist/page.tsx index 1cae82b..3168ef0 100644 --- a/app/watchlist/page.tsx +++ b/app/watchlist/page.tsx @@ -7,9 +7,13 @@ import axios from "axios"; import { getCookie } from "cookies-next"; import Link from "next/link"; import { NavTransition } from "../components/navbar/NavTransition"; +import Loading from "../components/Loading"; export default function WatchlistPage() { const [watchlistData, setWatchlistData] = useState([]); const token = getCookie("token"); + + const [loading, setLoading] = useState(true); + useEffect(() => { async function getWatchListData() { let data; @@ -19,6 +23,7 @@ export default function WatchlistPage() { url: apiURL + "/getWatchList", headers: { Authorization: "Bearer " + token }, }); + setLoading(false); } catch (err) { console.error(err); } @@ -45,12 +50,19 @@ export default function WatchlistPage() {

Watchlist

-
- {Object.keys(watchlistData).map((key: any) => { - const scrip = watchlistData[key]; - return ; - })} -
+ + {loading ? ( +
+ +
+ ) : ( +
+ {Object.keys(watchlistData).map((key: any) => { + const scrip = watchlistData[key]; + return ; + })} +
+ )} );