More skeleton loading work but will stop until working on plane

AnselmMarie · Sep 29, 2024 · bccd534 · bccd534
1 parent 610bdf0
commit bccd534
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 21 deletions.
diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.interface.ts b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.interface.ts
@@ -2,4 +2,5 @@ import { PokemonListApi } from '@pokemon-pet-shop/typing';
 
 export interface CardProps {
   data: PokemonListApi;
+  isLoading: boolean;
 }
diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx
@@ -19,21 +19,25 @@ import { CardProps } from './pokemon.card.interface';
 import { styles } from './pokemon.card.module';
 import usePokemonCardLogic from './use.pokemon.card.logic';
 
-const PokemonCard = ({ data }: CardProps): ReactElement => {
+const PokemonCard = ({ data, isLoading }: CardProps): ReactElement => {
   const { getThemeClass, onHandleOpenDetailModalClick } = usePokemonCardLogic(data);
 
   const capitalizeName = useMemo((): string => {
     return capitalizeNameUtil(data?.name);
   }, [data?.name]);
 
   return (
-    <UiCard className={classNamesUtil(styles.cardWrapper, styles?.[`${getThemeClass}Wrapper`])}>
+    <UiCard
+      className={classNamesUtil(styles.cardWrapper, styles?.[`${getThemeClass}Wrapper`])}
+      isLoading={isLoading}
+    >
       <UiElementLayout className={styles.imgCardWrapper}>
         <UiImage
           src={data?.sprites?.other?.['official-artwork']?.front_default}
           className={styles.image}
           alt={`${data?.name} Image`}
           mobSrcType={mobSrcTypeEnum.URI}
+          isLoading={isLoading}
         />
       </UiElementLayout>
 

diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx
@@ -20,14 +20,12 @@ const PokemonList = (): ReactElement => {
     onFetchNextPage,
   } = usePokemonList();
 
-  console.log('data', data);
+  const newData = useMemo(() => {
+    const template = { abilities: [{}, {}] };
+    return skeletonLoadDataUtil(data, isLoading, template, true);
+  }, [data, isLoading]);
 
-  // const newData = useMemo(() => {
-  //   const template = { abilities: [{}, {}] };
-  //   return skeletonLoadDataUtil(data, isLoading, template, true);
-  // }, [data, isLoading]);
-
-  if (data?.length === 0 && !hasNextPage) {
+  if (newData?.length === 0 && !hasNextPage) {
     return (
       <UiElementLayout className={styles.failureWrapper}>
         <UiTypography>No Pets are available at the moment. Please check back again.</UiTypography>
@@ -39,11 +37,11 @@ const PokemonList = (): ReactElement => {
   return (
     <>
       <UiElementLayout className={styles.cardListWrapper}>
-        {(data || []).map((arr: PokemonListApi[], i: number): ReactElement => {
+        {(newData || []).map((arr: PokemonListApi[], i: number): ReactElement => {
           return (
             <Fragment key={i}>
               {arr.map((el: PokemonListApi, i: number) => (
-                <UiPokemonCard key={el?.name || i} data={el} />
+                <UiPokemonCard key={el?.name || i} data={el} isLoading={isLoading} />
               ))}
             </Fragment>
           );

diff --git a/libs/ui/src/lib-base/styles/css/global.css b/libs/ui/src/lib-base/styles/css/global.css
@@ -1,5 +1,6 @@
 @import url('reset.css');
 @import url('_variables.css');
+@import url('react-loading-skeleton/dist/skeleton.css');
 
 html[data-theme='dark'] {
   --theme-netural-100: var(--theme-netural-100-dark);

diff --git a/libs/ui/src/lib-base/ui/card/card.interface.ts b/libs/ui/src/lib-base/ui/card/card.interface.ts
@@ -1,3 +1,4 @@
 export interface CardProps {
   className?: any;
+  isLoading?: boolean;
 }
diff --git a/libs/ui/src/lib-base/ui/card/card.module.css b/libs/ui/src/lib-base/ui/card/card.module.css
@@ -2,3 +2,8 @@
   background: var(--theme-netural-100);
   border-radius: var(--theme-radius-8);
 }
+
+.cardLoading {
+  background: var(--theme-netural-400);
+  border-radius: var(--theme-radius-8);
+}
diff --git a/libs/ui/src/lib-base/ui/card/card.view.tsx b/libs/ui/src/lib-base/ui/card/card.view.tsx
@@ -7,9 +7,14 @@ import { UiElementLayout } from '../element.layout';
 import { CardProps } from './card.interface';
 import { styles } from './card.module';
 
-const Card = ({ className = '', children = null }: PropsWithChildren<CardProps>): ReactElement => {
+const Card = ({
+  className = '',
+  isLoading = false,
+  children = null,
+}: PropsWithChildren<CardProps>): ReactElement => {
+  const cardStyle = isLoading ? styles.cardLoading : styles.card;
   return (
-    <UiElementLayout className={classNamesUtil(className, styles.card)}>{children}</UiElementLayout>
+    <UiElementLayout className={classNamesUtil(className, cardStyle)}>{children}</UiElementLayout>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/image/image.interface.ts b/libs/ui/src/lib-base/ui/image/image.interface.ts
@@ -5,5 +5,6 @@ export interface ImageProps {
   alt?: string;
   width?: string;
   className?: any;
+  isLoading?: boolean;
   mobSrcType?: mobSrcTypeEnum;
 }
diff --git a/libs/ui/src/lib-base/ui/image/image.view.tsx b/libs/ui/src/lib-base/ui/image/image.view.tsx
@@ -1,8 +1,19 @@
 import { ReactElement } from 'react';
 
+import { UiSkeleton } from '../skeleton';
+
 import { ImageProps } from './image.interface';
 
-const Image = ({ src = '', alt = '', width = '', className = null }: ImageProps): ReactElement => {
+const Image = ({
+  src = '',
+  alt = '',
+  width = '',
+  className = null,
+  isLoading,
+}: ImageProps): ReactElement => {
+  if (isLoading) {
+    return <UiSkeleton circle />;
+  }
   return <img src={src} alt={alt} width={width} className={className} />;
 };
 

diff --git a/libs/ui/src/lib-base/ui/skeleton/skeleton.view.native.tsx b/libs/ui/src/lib-base/ui/skeleton/skeleton.view.native.tsx
@@ -8,7 +8,7 @@ import { UiElementLayout } from '../element.layout';
 import { styles } from './shkeleon.module.native';
 import { SkeletonProps } from './skeleton.interface';
 
-const Skeleton = ({
+const SkeletonView = ({
   count = 1,
   width = '100%',
   height = 15,
@@ -48,4 +48,4 @@ const Skeleton = ({
   );
 };
 
-export default Skeleton;
+export default SkeletonView;
diff --git a/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx b/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx
@@ -1,16 +1,18 @@
 import { ReactElement } from 'react';
 
+import Skeleton from 'react-loading-skeleton';
+
+import { THEME_RADIUS_8, THEME_RADIUS_CIRCLE } from '../../styles/ts/variables';
 import { UiElementLayout } from '../element.layout';
 
 import { SkeletonProps } from './skeleton.interface';
 
-const Skeleton = ({
+const SkeletonView = ({
   count = 1,
   width = '100%',
   height = 15,
   circle = false,
 }: SkeletonProps): ReactElement => {
-  const borderRadiusStyle = circle ? 100 : 5;
   let newCount;
 
   if (circle) {
@@ -25,11 +27,18 @@ const Skeleton = ({
 
   return (
     <>
-      {arr.map((el: any, i: number): ReactElement => {
-        return <UiElementLayout key={i}>loading</UiElementLayout>;
+      {arr.map((_, i: number): ReactElement => {
+        return (
+          <Skeleton
+            key={i}
+            height={circle ? '100%' : height}
+            borderRadius={THEME_RADIUS_8}
+            circle={circle}
+          />
+        );
       })}
     </>
   );
 };
 
-export default Skeleton;
+export default SkeletonView;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.2",
+    "react-loading-skeleton": "^3.5.0",
     "react-native": "0.74.5",
     "react-native-dotenv": "^3.4.11",
     "react-native-error-boundary": "^1.2.4",