Skip to content

Commit f75bf20

Browse files
AnselmMarieAnselmMarie
authored
Merge pull request #39 from AnselmMarie/feature/amarie/suspense-update
Updating code to use supense
2 parents 273a051 + 3996555 commit f75bf20

36 files changed

Lines changed: 412 additions & 236 deletions

‎app-hosts/web/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
"name": "@pokemon-pet-shop/web",
33
"version": "0.0.1",
44
"private": true,
5+
"dependencies": {
6+
"@pokemon-pet-shop/ui-components": "workspace:*"
7+
},
58
"zephyr:dependencies": {
69
"webHeader": "webHeader@dev",
710
"webFooter": "webFooter@dev",

‎app-hosts/web/src/route/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { lazy, Suspense } from 'react';
1+
import { lazy } from 'react';
22
import {
33
createRootRoute,
44
createRouter,
55
createRoute,
66
Navigate,
77
Outlet,
88
} from '@tanstack/react-router';
9+
import { SuspenseBoundary } from '@pokemon-pet-shop/ui-components';
910

1011
const HomepageModule = lazy(() => import('webHomepage/Module'));
1112
const NotFoundModule = lazy(() => import('webNotFound/Module'));
@@ -18,19 +19,19 @@ const homepageRoute = createRoute({
1819
getParentRoute: () => rootRoute,
1920
path: '/',
2021
component: () => (
21-
<Suspense fallback={<div>Loading Homepage...</div>}>
22+
<SuspenseBoundary fallback={<div>Loading Homepage...</div>}>
2223
<HomepageModule />
23-
</Suspense>
24+
</SuspenseBoundary>
2425
),
2526
});
2627

2728
const notFoundRoute = createRoute({
2829
getParentRoute: () => rootRoute,
2930
path: '/not-found',
3031
component: () => (
31-
<Suspense fallback={<div>Loading...</div>}>
32+
<SuspenseBoundary fallback={<div>Loading...</div>}>
3233
<NotFoundModule />
33-
</Suspense>
34+
</SuspenseBoundary>
3435
),
3536
});
3637

‎app-hosts/web/tsconfig.app.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
{
3535
"path": "../../app-remotes/web-homepage/tsconfig.app.json"
3636
},
37+
{
38+
"path": "../../libs/ui/components/tsconfig.lib.json"
39+
},
3740
{
3841
"path": "../../app-remotes/web-footer/tsconfig.app.json"
3942
},

‎app-remotes/web-homepage/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.1",
44
"private": true,
55
"dependencies": {
6-
"@pokemon-pet-shop/feature-pokemon": "workspace:*"
6+
"@pokemon-pet-shop/feature-pokemon": "workspace:*",
7+
"@pokemon-pet-shop/ui-components": "workspace:*"
78
},
89
"zephyr:dependencies": {
910
"atomTheme": "atomTheme@dev"

‎app-remotes/web-homepage/src/app/index.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import { PokemonList } from '@pokemon-pet-shop/feature-pokemon';
1+
import { PokemonList, PokemonListSkeleton } from '@pokemon-pet-shop/feature-pokemon';
2+
import { SuspenseBoundary } from '@pokemon-pet-shop/ui-components';
23

34
import '../styles.css';
45

5-
export default function App() {
6-
return <PokemonList />;
7-
}
6+
const App = () => {
7+
return (
8+
<SuspenseBoundary fallback={<PokemonListSkeleton />}>
9+
<PokemonList />
10+
</SuspenseBoundary>
11+
);
12+
};
13+
14+
export default App;

‎app-remotes/web-homepage/tsconfig.app.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
],
2828
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
2929
"references": [
30+
{
31+
"path": "../../libs/ui/components/tsconfig.lib.json"
32+
},
3033
{
3134
"path": "../../libs/features/pokemon/tsconfig.lib.json"
3235
}

‎libs/features/modal-cart/src/lib/cart-icon.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,28 @@ import { ReactElement } from 'react';
22
import { useSetAtom } from 'jotai';
33

44
import { Box, Typography } from '@pokemon-pet-shop/ui-primitives';
5-
import { Icon } from '@pokemon-pet-shop/ui-components';
5+
import { Icon, SuspenseBoundary } from '@pokemon-pet-shop/ui-components';
66

77
import { useGetCart } from '@pokemon-pet-shop/service-cart';
88

99
import { CartModal } from './cart-modal';
1010
import { openSideCartModalAtom } from './cart-modal-atom.state';
1111

12+
const CartIconContent = (): ReactElement | null => {
13+
const { data } = useGetCart();
14+
15+
return data?.counter ? (
16+
<Box className="rounded-circle bg-medYellow min-w-[23px] min-h-[23px] align-center inline-block p-3 absolute -top-[15px] -right-[11px] pointer">
17+
<Typography className="flex justify-center item-center text-primary font-bold">
18+
{data?.counter}
19+
</Typography>
20+
</Box>
21+
) : null;
22+
};
23+
1224
export const CartIcon = (): ReactElement => {
1325
const openCartModal = useSetAtom(openSideCartModalAtom);
1426

15-
const { data } = useGetCart();
16-
1727
return (
1828
<>
1929
<CartModal />
@@ -25,13 +35,9 @@ export const CartIcon = (): ReactElement => {
2535
}}
2636
/>
2737
<Icon classNameIcon="ml-2 red" size={28} color="blue" />
28-
{data?.counter ? (
29-
<Box className="rounded-circle bg-medYellow min-w-[23px] min-h-[23px] align-center inline-block p-3 absolute -top-[15px] -right-[11px] pointer">
30-
<Typography className="flex justify-center item-center text-primary font-bold">
31-
{data?.counter}
32-
</Typography>
33-
</Box>
34-
) : null}
38+
<SuspenseBoundary>
39+
<CartIconContent />
40+
</SuspenseBoundary>
3541
</Box>
3642
</>
3743
);

‎libs/features/modal-cart/src/lib/cart-modal.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,18 @@ import { useAtomValue, useSetAtom } from 'jotai';
33

44
import { CartData } from '@pokemon-pet-shop/types';
55
import { Box, Typography } from '@pokemon-pet-shop/ui-primitives';
6-
import { Modal, ModalScroll } from '@pokemon-pet-shop/ui-components';
6+
import { Modal, ModalScroll, SuspenseBoundary, Skeleton } from '@pokemon-pet-shop/ui-components';
77
import { useGetCart } from '@pokemon-pet-shop/service-cart';
88
import { pricingFormatUSD } from '@pokemon-pet-shop/util-pricing';
99

1010
import CartModalItem from './cart-modal-item';
1111
import { closeSideCartModalAtom, isSideCartModalOpenAtom } from './cart-modal-atom.state';
1212

13-
export const CartModal = (): ReactElement => {
13+
const CartModalContent = (): ReactElement => {
1414
const { data } = useGetCart();
1515

16-
const isOpen = useAtomValue(isSideCartModalOpenAtom);
17-
const closeModal = useSetAtom(closeSideCartModalAtom);
18-
1916
return (
20-
<Modal
21-
title="Pokecart"
22-
headlineType="relative"
23-
modalAlignment="right"
24-
isOpen={isOpen}
25-
onClick={closeModal}
26-
>
17+
<>
2718
<ModalScroll>
2819
<Box className="pb-[150px]">
2920
{(data?.data ?? []).map((el: CartData, i: number) => {
@@ -45,6 +36,33 @@ export const CartModal = (): ReactElement => {
4536
{pricingFormatUSD(Number(data?.total))}
4637
</Typography>
4738
</Box>
39+
</>
40+
);
41+
};
42+
43+
const CartModalSkeleton = (): ReactElement => {
44+
return (
45+
<Box className="p-lg">
46+
<Skeleton count={3} height={60} />
47+
</Box>
48+
);
49+
};
50+
51+
export const CartModal = (): ReactElement => {
52+
const isOpen = useAtomValue(isSideCartModalOpenAtom);
53+
const closeModal = useSetAtom(closeSideCartModalAtom);
54+
55+
return (
56+
<Modal
57+
title="Pokecart"
58+
headlineType="relative"
59+
modalAlignment="right"
60+
isOpen={isOpen}
61+
onClick={closeModal}
62+
>
63+
<SuspenseBoundary fallback={<CartModalSkeleton />}>
64+
<CartModalContent />
65+
</SuspenseBoundary>
4866
</Modal>
4967
);
5068
};

‎libs/features/pokemon/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
export * from './lib/pokemon-list';
2+
export { PokemonListSkeleton } from './lib/pokemon-list/pokemon-list-skeleton';
3+
export { PokemonCardSkeleton } from './lib/pokemon-card/pokemon-card-skeleton';
4+
export { PokemonDetailModalSkeleton } from './lib/modal-pokemon-detail/pokemon-detail-modal-skeleton';

‎libs/features/pokemon/src/lib/components/pokemon-ability-name/pokemon-ability-name.tsx‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
PokemonDetailTypes,
88
} from '@pokemon-pet-shop/types';
99
import { Box, Typography } from '@pokemon-pet-shop/ui-primitives';
10-
import { HideInMobile, IconPokeType, Skeleton } from '@pokemon-pet-shop/ui-components';
10+
import { HideInMobile, IconPokeType } from '@pokemon-pet-shop/ui-components';
1111

1212
import { capitalizeName } from '@pokemon-pet-shop/util-text-transform';
1313

@@ -19,7 +19,6 @@ interface PokemonAbilityNameProps {
1919
pokeTypeClass: IconPokeListType;
2020
showAtkLine?: boolean;
2121
displayInDetail?: boolean;
22-
isLoading?: boolean;
2322
}
2423

2524
export const PokemonAbilityName = ({
@@ -28,7 +27,6 @@ export const PokemonAbilityName = ({
2827
pokeTypeClass,
2928
showAtkLine = true,
3029
displayInDetail = false,
31-
isLoading = false,
3230
}: PokemonAbilityNameProps): ReactElement => {
3331
const isAtkLineShownCircleClass = useMemo(() => {
3432
return showAtkLine ? 'md:-ml-[12px]' : '';
@@ -89,23 +87,7 @@ export const PokemonAbilityName = ({
8987
] ?? ''
9088
}`}
9189
>
92-
{isLoading ? (
93-
<Skeleton
94-
width={100}
95-
baseColor={
96-
(pokeAbilityTypeMap.get(pokeTypeClass)?.[
97-
`${pokeTypeClass}SkeletonBase` as keyof object
98-
] ?? undefined) as string | undefined
99-
}
100-
highlightColor={
101-
(pokeAbilityTypeMap.get(pokeTypeClass)?.[
102-
`${pokeTypeClass}SkeletonHighlight` as keyof object
103-
] ?? undefined) as string | undefined
104-
}
105-
/>
106-
) : (
107-
formatName
108-
)}
90+
{formatName}
10991
</Typography>
11092
</Box>
11193
);

0 commit comments

Comments
 (0)