update

src/Contexts/GlobalStateContext.tsx

@@ -2,11 +2,12 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
   isAuthenticate: boolean;
   setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);
 

src/Contexts/GlobalStateProvider.tsx

@@ -1,14 +1,21 @@
-import { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
-
+import { ReactNode, useState } from "react";
+import GlobalStateContext from "./GlobalStateContext";
 
 
 
 const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
   const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+
+ 
 
   return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+    }}>
       {children}
     </GlobalStateContext.Provider>
   );

src/Layouts/DefaultLayout.tsx

@@ -24,7 +24,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
   if (!context) {
     throw new Error('App must be used within a GlobalStateProvider');
   }
-  const { setIsAuthenticate } = context;
+  const { setIsAuthenticate, isBarLoading } = context;
   const [ logOutAdmin ] = useLogOutMutation()
 
 
@@ -48,7 +48,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
 
   return (
     <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
-    <ProgressBar isLoading={false}  />
+    <ProgressBar isLoading={isBarLoading}  />
     <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
       
       <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -3,10 +3,21 @@ import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.
 import MainFrame from "../../../components/MainFrame";
 import { Spinner } from "../../../components/Sipnner/Spinner";
 import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
 
 
 const PrivacyPolicy = () => {
   const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
+
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error('App must be used within a GlobalStateProvider');
+  
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching)
+  }, [data])
+  
   return (
     <MainFrame transperant={true}>
       <VStack gap={4} pb={4} pt={0}>

src/Pages/Profile/Profile.tsx

@@ -1,7 +1,6 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
-import { Button } from "../../components/ui/button";
+import MainFrame from "../../components/MainFrame";
 import Changepassword from "./ChangePassword";
 
 const Profile = () => {
@@ -10,13 +9,11 @@ const Profile = () => {
       <Stack p={5}>
         <Box position="relative" width="fit-content"
           display="inline-block"
-
           cursor="pointer" onClick={() => alert("Avatar clicked!")}>
           <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
             <Avatar.Fallback />
             <Avatar.Image src="https://bit.ly/sage-adebayo" />
           </Avatar.Root>
-
           <Box
             position="absolute"
             bottom="-2px"
@@ -27,7 +24,6 @@ const Profile = () => {
           </Box>
         </Box>
         <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
-        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
         <Text color="black" fontSize="12px">
           Employee ID: <span>#1245679</span>
         </Text>
@@ -35,14 +31,16 @@ const Profile = () => {
           <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
-              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
-              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
-
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
           </SimpleGrid>
           <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
           {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>

src/components/MainFrame.tsx

@@ -14,12 +14,12 @@ interface MainFrameProps {
 
 const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack   overflow={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        h="100%"
+        // minH="100%"
         bg={transperant?'transperant':"#ffffff"}
-        overflow={'scroll'}
+        // overflow={'scroll'}
         rounded="lg"
         boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
         pt={transperant?0:3}