From 9c19613073e9ea264272fb187b11183a817b42cc Mon Sep 17 00:00:00 2001 From: jazicorn <40859840+jazicorn@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:31:04 -0400 Subject: [PATCH 1/2] updated loading screens --- .../dashboard/dashboard-code/D_Editor.tsx | 15 +-- .../dashboard/dashboard-code/D_Problem.tsx | 16 +-- apps/web/src/components/dashboard/loading.tsx | 66 +++++----- apps/web/src/layout/Layout.D_Calendar.tsx | 25 +++- apps/web/src/layout/Layout.D_Categories.tsx | 91 ++++++++------ apps/web/src/layout/Layout.D_Code.tsx | 114 +++++++++++++++--- apps/web/src/layout/Layout.D_Docs.tsx | 28 ++++- apps/web/src/layout/Layout.D_Home.tsx | 24 +++- apps/web/src/layout/Layout.D_Notes.tsx | 26 +++- apps/web/src/layout/Layout.D_Plans.tsx | 26 +++- apps/web/src/layout/Layout.D_Search.tsx | 26 +++- apps/web/src/layout/Layout.D_Settings.tsx | 26 +++- .../web/src/layout/Layout.D_Settings_User.tsx | 26 +++- 13 files changed, 367 insertions(+), 142 deletions(-) diff --git a/apps/web/src/components/dashboard/dashboard-code/D_Editor.tsx b/apps/web/src/components/dashboard/dashboard-code/D_Editor.tsx index 0c8f247..527158d 100644 --- a/apps/web/src/components/dashboard/dashboard-code/D_Editor.tsx +++ b/apps/web/src/components/dashboard/dashboard-code/D_Editor.tsx @@ -11,10 +11,9 @@ import { useQuery } from "@tanstack/react-query"; import { ThemeContext } from '../../../context/ThemeContext'; import { Transition2 } from '../../../hooks/useTransition'; import useWindowSize from '../../../hooks/useWindowSize'; -import { Center } from '@mantine/core'; /** Custom State Components*/ -import ErrorDashboard from '../../dashboard/error'; -import {LoadingDashboardMD} from '../../dashboard/loading'; +//import ErrorDashboard from '../../dashboard/error'; +//import {LoadingDashboardMD} from '../../dashboard/loading'; /** Notifications */ import { notifications } from '@mantine/notifications'; import { IconX, IconCheck } from '@tabler/icons-react'; @@ -64,7 +63,7 @@ const D_Editor = () => { }, [getMenuRoute]); /** Generate Question */ - const { isLoading, isFetching, isError, isSuccess, error, data } = useQuery({ + const { isSuccess, data } = useQuery({ queryKey: ['questionData'], queryFn: getQuestion, refetchOnWindowFocus: false, @@ -231,14 +230,6 @@ const D_Editor = () => { dispatch(menuConsoleMessage(consoleMessage)); },[consoleMessage, dispatch]); - /** Render if Loading */ - if (isLoading || isFetching || getMenuQuestion === undefined) return ( -
- ) - - /** Render if Error */ - if (isError) return - /** Render if Successful */ if (isSuccess) return (
diff --git a/apps/web/src/components/dashboard/dashboard-code/D_Problem.tsx b/apps/web/src/components/dashboard/dashboard-code/D_Problem.tsx index a7b448e..a075c8f 100644 --- a/apps/web/src/components/dashboard/dashboard-code/D_Problem.tsx +++ b/apps/web/src/components/dashboard/dashboard-code/D_Problem.tsx @@ -6,9 +6,6 @@ import { useContext, useCallback, useEffect } from 'react'; /** Custom Hooks */ import { ThemeContext } from '../../../context/ThemeContext'; import { Transition2 } from '../../../hooks/useTransition'; -/** Custom State Components*/ -import ErrorDashboard from '../error'; -import {LoadingDashboardLG, LoadingDashboardMD} from '../loading'; /** React Redux Hooks */ import { useAppSelector, useAppDispatch } from '../../../redux/reduxHooks.ts'; import { @@ -16,7 +13,6 @@ import { } from '../../../redux/slices/dashboardSlice.ts'; /** React Query */ import { useQuery } from "@tanstack/react-query"; -import { Center } from '@mantine/core'; /** API url | Custom env mandatory to begin with VITE * https://vitejs.dev/guide/env-and-mode.html#env-files */ const baseURL = import.meta.env.VITE_API_BASE_URL; @@ -52,7 +48,7 @@ const D_Problem = () => { }, [getMenuRoute]); /** Generate Question */ - const { isLoading, isFetching, isError, isSuccess, error, data, refetch } = useQuery({ + const { isSuccess, data, refetch } = useQuery({ queryKey: ['questionData'], queryFn: getQuestion, refetchOnWindowFocus: false, @@ -76,14 +72,6 @@ const D_Problem = () => { refetch(); } - /** Render if Loading */ - if (isLoading || isFetching || getMenuQuestion === undefined) return ( -
- ) - - /** Render if Error */ - if (isError) return - /** Render if Successful */ if(isSuccess) return (
@@ -109,7 +97,7 @@ const D_Problem = () => { {/**Question: Task */} {getMenuQuestion._QUESTION_TASK === undefined ? - +
:
{/**Question: Task */} diff --git a/apps/web/src/components/dashboard/loading.tsx b/apps/web/src/components/dashboard/loading.tsx index d6e370f..06cb67f 100644 --- a/apps/web/src/components/dashboard/loading.tsx +++ b/apps/web/src/components/dashboard/loading.tsx @@ -11,13 +11,13 @@ export const LoadingDashboardXS = () => { <> {darkMode ?
-
+
:
-
+
@@ -33,17 +33,17 @@ export const LoadingDashboardSM = () => { return ( <> {darkMode ? -
-
-
+ +
+
-
+ : -
-
-
+ +
+
-
+ } ) @@ -55,17 +55,13 @@ export const LoadingDashboardMD = () => { return ( <> {darkMode ? -
-
-
+
+
-
: -
-
-
+
+
-
} ) @@ -77,17 +73,17 @@ export const LoadingDashboardLG = () => { return ( <> {darkMode ? -
-
+ +
-
+ : -
-
-
+ +
+
-
+ } ) @@ -99,17 +95,17 @@ export const LoadingDashboardXL = () => { return ( <> {darkMode ? -
-
- -
-
+ +
+ +
+ : -
-
- -
-
+ +
+ +
+ } ) diff --git a/apps/web/src/layout/Layout.D_Calendar.tsx b/apps/web/src/layout/Layout.D_Calendar.tsx index 4ad7a49..adbb4cf 100644 --- a/apps/web/src/layout/Layout.D_Calendar.tsx +++ b/apps/web/src/layout/Layout.D_Calendar.tsx @@ -1,15 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -// components +/**Custom Components */ import D_Calendar from '../components/dashboard/dashboard-calendar/D_Calendar'; const Layout_D_Calender = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "1000"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} diff --git a/apps/web/src/layout/Layout.D_Categories.tsx b/apps/web/src/layout/Layout.D_Categories.tsx index 3c470f4..0a34f28 100644 --- a/apps/web/src/layout/Layout.D_Categories.tsx +++ b/apps/web/src/layout/Layout.D_Categories.tsx @@ -1,13 +1,13 @@ -// Categories -import { useContext, useEffect } from 'react' +// Page: Dashboard Categories +/**React */ +import { useContext, useEffect, useState } from 'react' import { ThemeContext } from '../context/ThemeContext' -// hooks +/*Custom Hooks*/ //import Transition from '../hooks/useTransition'; import useWindowSize from '../hooks/useWindowSize'; -// components +/**Custom Components */ import ErrorDashboard from '../components/dashboard/error'; import { LoadingDashboardXL } from '../components/dashboard/loading'; -// components import D_Category from '../components/dashboard/dashboard-categories/D_Category'; import D_Category_Menu from '../components/dashboard/dashboard-categories/D_Category_Menu'; // import D_Languages from '../components/dashboard/dashboard-categories/D_Languages'; @@ -18,7 +18,6 @@ import { useAppSelector, useAppDispatch } from '../redux/reduxHooks.ts'; import { menuLanguage, menuCategoryInfo } from '../redux/slices/dashboardSlice.ts'; -import { Center } from '@mantine/core'; const baseURL = import.meta.env.VITE_API_BASE_URL; @@ -58,7 +57,7 @@ const Layout_D_Categories = () => { }; /** Generate Categories */ - const { isLoading, isError, error, data} = useQuery({ + const { isFetching, isLoading, isError, error, isSuccess, data} = useQuery({ queryKey: ['categoriesData'], queryFn: getCategories, refetchOnWindowFocus: false, @@ -76,38 +75,60 @@ const Layout_D_Categories = () => { dispatch(menuCategoryInfo(results)) },[data, dispatch, getMenuCategory, getMenuCategoryInfo]); - if (isLoading) return (
) + /**Delay Loading Screen */ + const [loading, setLoading] = useState(true); - if (isError) return + setTimeout(() => { + setLoading(false) + }, "600"); - return ( -
- {/**Page Content | Position: Relative */} - {isDesktopMDXL || isDesktopXL ? -
*]:tw-bg-neutral-700/90' : '[&>*]:tw-bg-neutral-300/90'} - [&>*]:tw-backdrop-blur-sm [&>*]:tw-rounded tw-border tw-border-transparent tw-w-full tw-h-full - tw-grid tw-grid-rows-layout-dashboard-categories-container tw-gap-1 `}> -
-
- -
-
-
-
-
-
- : -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-65'} - tw-bg-transparent tw-pb-1 tw-w-full tw-h-full tw-grow [&>*]:tw-backdrop-blur-sm - tw-grid tw-grid-rows-layout-dashboard-categories-mobile tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}> -
*]:tw-bg-campfire-neutral-300"} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}> - -
-
-
- } + /** Render if Loading */ + if (isFetching || isLoading) return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
) + + if (isError) return + + if(isSuccess && loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + + if(isSuccess && !loading) { + return ( +
+ {/**Page Content | Position: Relative */} + {isDesktopMDXL || isDesktopXL ? +
*]:tw-bg-neutral-700/90' : '[&>*]:tw-bg-neutral-300/90'} + [&>*]:tw-backdrop-blur-sm [&>*]:tw-rounded tw-border tw-border-transparent tw-w-full tw-h-full + tw-grid tw-grid-rows-layout-dashboard-categories-container tw-gap-1 `}> +
+
+ +
+
+
+
+
+
+ : +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-65'} + tw-bg-transparent tw-pb-1 tw-w-full tw-h-full tw-grow [&>*]:tw-backdrop-blur-sm + tw-grid tw-grid-rows-layout-dashboard-categories-mobile tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}> +
*]:tw-bg-campfire-neutral-300"} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}> + +
+
+
+ } +
+ ) + } } export default Layout_D_Categories diff --git a/apps/web/src/layout/Layout.D_Code.tsx b/apps/web/src/layout/Layout.D_Code.tsx index 021d852..2ac1a82 100644 --- a/apps/web/src/layout/Layout.D_Code.tsx +++ b/apps/web/src/layout/Layout.D_Code.tsx @@ -1,36 +1,119 @@ -import { useContext } from 'react' +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext' -// hooks import useWindowSize from '../hooks/useWindowSize'; -// components +/**Custom Components */ import D_Editor from '../components/dashboard/dashboard-code/D_Editor'; import D_Problem from '../components/dashboard/dashboard-code/D_Problem'; import D_Console from '../components/dashboard/dashboard-code/D_Console'; import D_Scoreboard from '../components/dashboard/dashboard-code/D_Scoreboard'; +/** React Hooks */ +import { useContext, useEffect, useCallback, useState } from 'react'; +/** React Redux */ +import { useAppDispatch, useAppSelector } from '../redux/reduxHooks.ts'; +import type { RootState } from '../redux/store.ts'; +import { menuQuestion } from '../redux/slices/dashboardSlice.ts'; +/** React Query */ +import { useQuery } from "@tanstack/react-query"; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +//import ErrorDashboard from '../components/dashboard/error'; + +/** API url | Custom env mandatory to begin with VITE + * https://vitejs.dev/guide/env-and-mode.html#env-files */ +const baseURL = import.meta.env.VITE_API_BASE_URL; const Layout_D_Code = () => { const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; - return ( -
+ /** Redux Dispatch Instance */ + const dispatch = useAppDispatch(); + + /** Retrieve Category Route From Redux State */ + const getMenuRoute = useAppSelector((state:RootState) => state?.dashboard?.categoryRoute); + + /** Retrieve Category Based Question */ + const getQuestion = useCallback( async () => { + /** Retrieve Question from API */ + try { + let res; + const prodURL = `${baseURL}/${getMenuRoute}`; + const devURL = `/api/${getMenuRoute}`; + if(import.meta.env.PROD) { + res = await fetch(prodURL); + const resJSON = res.json(); + return resJSON; + } else { + res = await fetch(devURL); + const resJSON = res.json(); + return resJSON; + } + } catch(error) { + console.log(error); + } + }, [getMenuRoute]); + + /** Generate Question */ + const { isLoading, isFetching, isError, error, isSuccess, data } = useQuery({ + queryKey: ['questionData'], + queryFn: getQuestion, + refetchOnWindowFocus: false, + staleTime: 100 * (60 * 1000), + cacheTime: 100 * (60 * 1000), + }); + + /** Save Question to Redux Store */ + useEffect(() => { + if(data !== undefined) { + dispatch(menuQuestion(data.data)); + } + }, [dispatch, data]); + + /**Delay Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + /** Render if Error */ + if (isError) {return } + + /** Render if Loading */ + if (isFetching || isLoading) { return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ )} + + if(isSuccess && loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + + if(isSuccess && !loading) { + return ( +
{/**Page Content | Position: Relative */} {isDesktopMDXL || isDesktopXL ?
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-bg-transparent tw-w-full tw-h-full [&>*]:tw-backdrop-blur-sm tw-grid tw-grid-rows-layout-dashboard-code tw-grid-cols-layout-dashboard-code tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}>
- +
- +
- +
- +
: @@ -39,21 +122,22 @@ const Layout_D_Code = () => { tw-grid tw-grid-rows-layout-dashboard-code-mobile tw-grid-cols-layout-dashboard-code-mobile tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}> {/** z index can't go higher than 50 to work*/}
- +
- +
- +
- +
} -
- ) +
+ ) + } } export default Layout_D_Code diff --git a/apps/web/src/layout/Layout.D_Docs.tsx b/apps/web/src/layout/Layout.D_Docs.tsx index 40f3446..4ee0438 100644 --- a/apps/web/src/layout/Layout.D_Docs.tsx +++ b/apps/web/src/layout/Layout.D_Docs.tsx @@ -1,16 +1,35 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_Docs from '../components/dashboard/dashboard-docs/D_Docs'; const Layout_D_Docs = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + + if(!loading) { return (
{/**Page Content | Position: Relative */} @@ -33,6 +52,7 @@ const Layout_D_Docs = () => { }
) + } } export default Layout_D_Docs diff --git a/apps/web/src/layout/Layout.D_Home.tsx b/apps/web/src/layout/Layout.D_Home.tsx index 3a50f30..94a71a7 100644 --- a/apps/web/src/layout/Layout.D_Home.tsx +++ b/apps/web/src/layout/Layout.D_Home.tsx @@ -1,9 +1,11 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_User_Landing from '../components/dashboard/dashboard-home/D_User_Landing'; import D_Home_Navigation from '../components/dashboard/dashboard-home/D_Home_Navigation'; import D_Home_Navigation_Mobile from '../components/dashboard/dashboard-home/D_Home_Navigation_Mobile'; @@ -13,6 +15,20 @@ const Layout_D_Home = () => { const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } return (
diff --git a/apps/web/src/layout/Layout.D_Notes.tsx b/apps/web/src/layout/Layout.D_Notes.tsx index 15d9f3d..54464ed 100644 --- a/apps/web/src/layout/Layout.D_Notes.tsx +++ b/apps/web/src/layout/Layout.D_Notes.tsx @@ -1,16 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components */ import D_Notes from '../components/dashboard/dashboard-notes/D_Notes'; const Layout_D_Notes = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} diff --git a/apps/web/src/layout/Layout.D_Plans.tsx b/apps/web/src/layout/Layout.D_Plans.tsx index b436589..7662997 100644 --- a/apps/web/src/layout/Layout.D_Plans.tsx +++ b/apps/web/src/layout/Layout.D_Plans.tsx @@ -1,16 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_Plans from '../components/dashboard/dashboard-plans/D_Plans'; const Layout_D_Plans = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} diff --git a/apps/web/src/layout/Layout.D_Search.tsx b/apps/web/src/layout/Layout.D_Search.tsx index 2059516..8b12c79 100644 --- a/apps/web/src/layout/Layout.D_Search.tsx +++ b/apps/web/src/layout/Layout.D_Search.tsx @@ -1,16 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_Search from '../components/dashboard/dashboard-search/D_Search'; const Layout_D_Search = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} diff --git a/apps/web/src/layout/Layout.D_Settings.tsx b/apps/web/src/layout/Layout.D_Settings.tsx index c62d34a..06cdb34 100644 --- a/apps/web/src/layout/Layout.D_Settings.tsx +++ b/apps/web/src/layout/Layout.D_Settings.tsx @@ -1,16 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_Settings from '../components/dashboard/dashboard-settings/D_Settings'; const Layout_D_Settings = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} diff --git a/apps/web/src/layout/Layout.D_Settings_User.tsx b/apps/web/src/layout/Layout.D_Settings_User.tsx index 1d3b1ef..cb4c530 100644 --- a/apps/web/src/layout/Layout.D_Settings_User.tsx +++ b/apps/web/src/layout/Layout.D_Settings_User.tsx @@ -1,16 +1,34 @@ -import { useContext } from 'react'; +/**React */ +import { useContext, useState } from 'react'; +/** Custom State Components*/ +import {LoadingDashboardXL} from '../components/dashboard/loading'; +/**Custom Hooks */ import { ThemeContext } from '../context/ThemeContext'; -// hooks import useWindowSize from '../hooks/useWindowSize'; -//import Transition from '../hooks/useTransition'; -// components +/**Custom Components*/ import D_Settings_User from '../components/dashboard/dashboard-settings/D_Settings_User'; const Layout_D_Settings_User = () => { + /**Custom Hooks */ const { isDesktopMDXL, isDesktopXL } = useWindowSize(); const { state } = useContext(ThemeContext); const darkMode = state.darkMode; + /**Loading Screen */ + const [loading, setLoading] = useState(true); + + setTimeout(() => { + setLoading(false) + }, "600"); + + if(loading) { + return ( +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> + +
+ ) + } + return (
{/**Page Content | Position: Relative */} From 9e59f776f83befed05cd9552edd8e76a358bde1d Mon Sep 17 00:00:00 2001 From: jazicorn <40859840+jazicorn@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:38:30 -0400 Subject: [PATCH 2/2] updated loading screens backgrounds --- apps/web/src/components/dashboard/loading.tsx | 3 ++- apps/web/src/layout/Layout.D_Calendar.tsx | 3 ++- apps/web/src/layout/Layout.D_Categories.tsx | 3 ++- apps/web/src/layout/Layout.D_Code.tsx | 3 ++- apps/web/src/layout/Layout.D_Docs.tsx | 3 ++- apps/web/src/layout/Layout.D_Home.tsx | 3 ++- apps/web/src/layout/Layout.D_Notes.tsx | 3 ++- apps/web/src/layout/Layout.D_Plans.tsx | 3 ++- apps/web/src/layout/Layout.D_Search.tsx | 3 ++- apps/web/src/layout/Layout.D_Settings.tsx | 3 ++- apps/web/src/layout/Layout.D_Settings_User.tsx | 3 ++- 11 files changed, 22 insertions(+), 11 deletions(-) diff --git a/apps/web/src/components/dashboard/loading.tsx b/apps/web/src/components/dashboard/loading.tsx index 06cb67f..b63893c 100644 --- a/apps/web/src/components/dashboard/loading.tsx +++ b/apps/web/src/components/dashboard/loading.tsx @@ -102,7 +102,8 @@ export const LoadingDashboardXL = () => { : -
+
diff --git a/apps/web/src/layout/Layout.D_Calendar.tsx b/apps/web/src/layout/Layout.D_Calendar.tsx index adbb4cf..7f709de 100644 --- a/apps/web/src/layout/Layout.D_Calendar.tsx +++ b/apps/web/src/layout/Layout.D_Calendar.tsx @@ -23,7 +23,8 @@ const Layout_D_Calender = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Categories.tsx b/apps/web/src/layout/Layout.D_Categories.tsx index 0a34f28..c70eb27 100644 --- a/apps/web/src/layout/Layout.D_Categories.tsx +++ b/apps/web/src/layout/Layout.D_Categories.tsx @@ -93,7 +93,8 @@ const Layout_D_Categories = () => { if(isSuccess && loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} + ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Code.tsx b/apps/web/src/layout/Layout.D_Code.tsx index 2ac1a82..595cdbf 100644 --- a/apps/web/src/layout/Layout.D_Code.tsx +++ b/apps/web/src/layout/Layout.D_Code.tsx @@ -89,7 +89,8 @@ const Layout_D_Code = () => { if(isSuccess && loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Docs.tsx b/apps/web/src/layout/Layout.D_Docs.tsx index 4ee0438..efd3bbd 100644 --- a/apps/web/src/layout/Layout.D_Docs.tsx +++ b/apps/web/src/layout/Layout.D_Docs.tsx @@ -23,7 +23,8 @@ const Layout_D_Docs = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Home.tsx b/apps/web/src/layout/Layout.D_Home.tsx index 94a71a7..2db9558 100644 --- a/apps/web/src/layout/Layout.D_Home.tsx +++ b/apps/web/src/layout/Layout.D_Home.tsx @@ -24,7 +24,8 @@ const Layout_D_Home = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Notes.tsx b/apps/web/src/layout/Layout.D_Notes.tsx index 54464ed..78774d0 100644 --- a/apps/web/src/layout/Layout.D_Notes.tsx +++ b/apps/web/src/layout/Layout.D_Notes.tsx @@ -23,7 +23,8 @@ const Layout_D_Notes = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Plans.tsx b/apps/web/src/layout/Layout.D_Plans.tsx index 7662997..95f4c5f 100644 --- a/apps/web/src/layout/Layout.D_Plans.tsx +++ b/apps/web/src/layout/Layout.D_Plans.tsx @@ -23,7 +23,8 @@ const Layout_D_Plans = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Search.tsx b/apps/web/src/layout/Layout.D_Search.tsx index 8b12c79..8ffa06c 100644 --- a/apps/web/src/layout/Layout.D_Search.tsx +++ b/apps/web/src/layout/Layout.D_Search.tsx @@ -23,7 +23,8 @@ const Layout_D_Search = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Settings.tsx b/apps/web/src/layout/Layout.D_Settings.tsx index 06cdb34..03adf5d 100644 --- a/apps/web/src/layout/Layout.D_Settings.tsx +++ b/apps/web/src/layout/Layout.D_Settings.tsx @@ -23,7 +23,8 @@ const Layout_D_Settings = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
) diff --git a/apps/web/src/layout/Layout.D_Settings_User.tsx b/apps/web/src/layout/Layout.D_Settings_User.tsx index cb4c530..1a6acac 100644 --- a/apps/web/src/layout/Layout.D_Settings_User.tsx +++ b/apps/web/src/layout/Layout.D_Settings_User.tsx @@ -23,7 +23,8 @@ const Layout_D_Settings_User = () => { if(loading) { return ( -
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}> +
*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} + tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
)