Skip to content

Commit

Permalink
feat: add loading screen to dashboard example
Browse files Browse the repository at this point in the history
  • Loading branch information
@saurabhdaware
saurabhdaware committed Nov 28, 2024
1 parent ee9fe1b commit 55a3455
Showing 1 changed file with 182 additions and 156 deletions.
338 changes: 182 additions & 156 deletions packages/blade/src/components/BaseMotion/docs/MotionDashboardComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import BaseBox from '~components/Box/BaseBox';
import { AnimatePresence } from 'motion/react';
import { Slide } from '~components/Slide';
import { Move } from '~components/Move';
import { Spinner } from '~components/Spinner';

const isItemActive = (
location: { pathname: string },
Expand Down Expand Up @@ -148,6 +149,14 @@ export const DashboardWithRoutingExample = ({
}: {
routeComponent: (props: any) => React.ReactElement;
}) => {
const [isLoading, setIsLoading] = React.useState(true);

React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 4000);
}, []);

const { theme } = useTheme();
const { matchedBreakpoint, matchedDeviceType } = useBreakpoint({
breakpoints: theme.breakpoints,
Expand All @@ -158,120 +167,34 @@ export const DashboardWithRoutingExample = ({
const [isSideBarOpen, setIsSideBarOpen] = React.useState(false);

return (
<DashboardBackground>
<BaseBox backgroundColor="interactive.background.gray.default">
<Slide direction="top">
<TopNav>
{isMobile ? (
<>
<BladeLink icon={HomeIcon} size="medium" href="/home">
Home
</BladeLink>
<Heading textAlign="center" size="small" weight="semibold">
Payments
</Heading>
<Menu openInteraction="click">
<Avatar size="medium" name="Anurag Hazra" />
<MenuOverlay>
<MenuHeader title="Profile" />
<Box display="flex" gap="spacing.4" padding="spacing.4" alignItems="center">
<Avatar size="medium" name="John Doe" />
<Box display="flex" flexDirection="column" gap="spacing.2">
<Text size="medium" weight="semibold">
John Doe
</Text>
<Text size="xsmall" color="surface.text.gray.muted">
Razorpay Trusted Merchant
</Text>
</Box>
</Box>
<MenuItem>
<Text color="surface.text.gray.subtle">Settings</Text>
</MenuItem>
<MenuItem color="negative">
<Text color="feedback.text.negative.intense">Logout</Text>
</MenuItem>
</MenuOverlay>
</Menu>
</>
) : (
<>
<TopNavBrand>
<RazorpayLogo />
</TopNavBrand>
<TopNavContent>
<TabNav
items={[
{ title: 'Home', href: '/app/home', icon: HomeIcon },
{
href: '/app/payroll',
title: 'Payroll',
icon: RazorpayxPayrollIcon,
description: 'Automate payroll with ease.',
},
{
href: '/app/payments',
title: 'Payments',
icon: AcceptPaymentsIcon,
description: 'Manage payments effortlessly.',
},
{
href: '/app/magic-checkout',
title: 'Magic Checkout',
icon: ShoppingBagIcon,
description: 'Fast, one-click checkout.',
},
]}
>
{({ items }) => {
return (
<>
<TabNavItems>
{items.map((item) => {
return (
<TabNavItemLink
key={item.title}
title={item.title}
href={item.href}
icon={item.icon}
/>
);
})}
</TabNavItems>
</>
);
}}
</TabNav>
</TopNavContent>
<TopNavActions>
{isTablet ? (
<Tooltip content="Search in payments">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={SearchIcon}
/>
</Tooltip>
) : (
<SearchInput
placeholder="Search in payments"
accessibilityLabel="Search Across Razorpay"
/>
)}
<Tooltip content="View Ecosystem Health">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={ActivityIcon}
/>
</Tooltip>
<Tooltip content="View Announcements">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={AnnouncementIcon}
/>
</Tooltip>
<>
<Slide isVisible={isLoading} type="out" shouldUnmountWhenHidden>
<Box
position="fixed"
display="flex"
alignItems="center"
justifyContent="center"
width="100%"
height="100%"
backgroundColor="surface.background.gray.intense"
zIndex={2000}
>
<Spinner size="xlarge" accessibilityLabel="Dashboard Loading" />
</Box>
</Slide>

<DashboardBackground>
<BaseBox backgroundColor="interactive.background.gray.default">
<Slide direction="top" fromOffset="100%">
<TopNav>
{isMobile ? (
<>
<BladeLink icon={HomeIcon} size="medium" href="/home">
Home
</BladeLink>
<Heading textAlign="center" size="small" weight="semibold">
Payments
</Heading>
<Menu openInteraction="click">
<Avatar size="medium" name="Anurag Hazra" />
<MenuOverlay>
Expand All @@ -295,48 +218,151 @@ export const DashboardWithRoutingExample = ({
</MenuItem>
</MenuOverlay>
</Menu>
</TopNavActions>
</>
)}
</TopNav>
</Slide>
<Box
overflow="hidden"
position="relative"
borderRadius="large"
borderTopRightRadius="none"
borderBottomLeftRadius="none"
borderBottomRightRadius="none"
height="100%"
marginX={{ base: 'spacing.0', m: 'spacing.3' }}
>
<SideNavExample
isOpen={isSideBarOpen}
onDismiss={() => {
setIsSideBarOpen(false);
}}
/>
<Move>
<Box
marginLeft={{
base: '100%',
m: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),
</>
) : (
<>
<TopNavBrand>
<RazorpayLogo />
</TopNavBrand>
<TopNavContent>
<TabNav
items={[
{ title: 'Home', href: '/app/home', icon: HomeIcon },
{
href: '/app/payroll',
title: 'Payroll',
icon: RazorpayxPayrollIcon,
description: 'Automate payroll with ease.',
},
{
href: '/app/payments',
title: 'Payments',
icon: AcceptPaymentsIcon,
description: 'Manage payments effortlessly.',
},
{
href: '/app/magic-checkout',
title: 'Magic Checkout',
icon: ShoppingBagIcon,
description: 'Fast, one-click checkout.',
},
]}
>
{({ items }) => {
return (
<>
<TabNavItems>
{items.map((item) => {
return (
<TabNavItemLink
key={item.title}
title={item.title}
href={item.href}
icon={item.icon}
/>
);
})}
</TabNavItems>
</>
);
}}
</TabNav>
</TopNavContent>
<TopNavActions>
{isTablet ? (
<Tooltip content="Search in payments">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={SearchIcon}
/>
</Tooltip>
) : (
<SearchInput
placeholder="Search in payments"
accessibilityLabel="Search Across Razorpay"
/>
)}
<Tooltip content="View Ecosystem Health">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={ActivityIcon}
/>
</Tooltip>
<Tooltip content="View Announcements">
<Button
size={isMobile ? 'small' : 'medium'}
variant="tertiary"
icon={AnnouncementIcon}
/>
</Tooltip>
<Menu openInteraction="click">
<Avatar size="medium" name="Anurag Hazra" />
<MenuOverlay>
<MenuHeader title="Profile" />
<Box display="flex" gap="spacing.4" padding="spacing.4" alignItems="center">
<Avatar size="medium" name="John Doe" />
<Box display="flex" flexDirection="column" gap="spacing.2">
<Text size="medium" weight="semibold">
John Doe
</Text>
<Text size="xsmall" color="surface.text.gray.muted">
Razorpay Trusted Merchant
</Text>
</Box>
</Box>
<MenuItem>
<Text color="surface.text.gray.subtle">Settings</Text>
</MenuItem>
<MenuItem color="negative">
<Text color="feedback.text.negative.intense">Logout</Text>
</MenuItem>
</MenuOverlay>
</Menu>
</TopNavActions>
</>
)}
</TopNav>
</Slide>
<Box
overflow="hidden"
position="relative"
borderRadius="large"
borderTopRightRadius="none"
borderBottomLeftRadius="none"
borderBottomRightRadius="none"
height="100%"
marginX={{ base: 'spacing.0', m: 'spacing.3' }}
>
<SideNavExample
isOpen={isSideBarOpen}
onDismiss={() => {
setIsSideBarOpen(false);
}}
// 100vh - (topnav height [56px] + border [2px])
height="calc(100vh - 58px)"
padding="spacing.6"
backgroundColor="surface.background.gray.intense"
>
<AnimatePresence mode="wait">
<Switch location={location} key={location.pathname}>
<Route path="/app/:id" component={routeComponent} />
</Switch>
</AnimatePresence>
</Box>
</Move>
</Box>
</BaseBox>
</DashboardBackground>
/>
<Move>
<Box
marginLeft={{
base: '100%',
m: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),
}}
// 100vh - (topnav height [56px] + border [2px])
height="calc(100vh - 58px)"
padding="spacing.6"
backgroundColor="surface.background.gray.intense"
>
<AnimatePresence mode="wait">
<Switch location={location} key={location.pathname}>
<Route path="/app/:id" component={routeComponent} />
</Switch>
</AnimatePresence>
</Box>
</Move>
</Box>
</BaseBox>
</DashboardBackground>
</>
);
};

0 comments on commit 55a3455

Please sign in to comment.