Updating skeleton component

AnselmMarie · Oct 7, 2024 · e78ff3f · e78ff3f
1 parent 3cae823
commit e78ff3f
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 27 deletions.
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx
@@ -68,7 +68,7 @@ const PokemonDetailModal = (): ReactElement => {
               {!pricingIsLoading && !speciesIsLoading ? (
                 onGetPricingFormat
               ) : (
-                <UiSkeleton width="100px" />
+                <UiSkeleton width={100} />
               )}
             </UiTypography>
           </UiElementLayout>
@@ -111,12 +111,16 @@ const PokemonDetailModal = (): ReactElement => {
                 </UiTagWrapper>
               ) : null}
 
-              <UiTypography
-                className={newStyles.cardDescription}
-                typographyType={TypographyTypeEnum.P}
-              >
-                {!speciesIsLoading ? removeHtmlCodeInDescription : <UiSkeleton count={2} />}
-              </UiTypography>
+              {!speciesIsLoading ? (
+                <UiTypography
+                  className={newStyles.cardDescription}
+                  typographyType={TypographyTypeEnum.P}
+                >
+                  {removeHtmlCodeInDescription}
+                </UiTypography>
+              ) : (
+                <UiSkeleton count={2} />
+              )}
 
               <UiElementLayout className={newStyles.weightHeightWrapper}>
                 <UiTypography className={newStyles.weight} typographyType={TypographyTypeEnum.P}>

diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/use.pokemon.detail.modal.logic.ts b/libs/features/src/lib/pokemon/pokemon.detail.modal/use.pokemon.detail.modal.logic.ts
@@ -130,8 +130,6 @@ const usePokemonDetailModalLogic = (): PokemonDetailModalReturn => {
     pricingData,
   ]);
 
-  console.log('updateCartMutation', updateCartMutation);
-
   return {
     modalData,
     speciesData,

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
@@ -1,21 +1,19 @@
 import { ReactElement } from 'react';
 
-import { useRenderStyles } from '@pokemon-pet-shop/hooks';
+import Skeleton from 'react-native-reanimated-skeleton';
 
-import { THEME_RADIUS_8, THEME_RADIUS_CIRCLE, THEME_SPACING_15 } from '../../styles/ts/variables';
+import { THEME_RADIUS_PILL, THEME_SPACING_15 } from '../../styles/ts/variables';
 import { UiElementLayout } from '../element.layout';
 
 import { SkeletonProps } from './skeleton.interface';
-import { styles } from './skeleton.module.native';
 
 const SkeletonView = ({
   count = 1,
   width = '100%',
   height = 15,
   circle = false,
 }: SkeletonProps): ReactElement => {
-  const { newStyles } = useRenderStyles(styles);
-  const borderRadiusStyle = circle ? THEME_RADIUS_CIRCLE : THEME_RADIUS_8;
+  // const borderRadiusStyle = circle ? THEME_RADIUS_CIRCLE : THEME_RADIUS_8;
   let newCount;
 
   if (circle) {
@@ -29,22 +27,25 @@ const SkeletonView = ({
   const arr = Array(newCount).fill({});
 
   return (
-    <>
+    <UiElementLayout>
       {arr.map((el: any, i: number): ReactElement => {
         return (
-          <UiElementLayout key={i} className={{ marginBottom: count > 1 ? THEME_SPACING_15 : '' }}>
-            <UiElementLayout
-              className={{
-                width: count > 1 && i === arr.length - 1 ? '50%' : width,
+          <Skeleton
+            key={i}
+            layout={[
+              {
+                key: 'someId',
+                width,
                 height,
-                backgroundColor: newStyles.skeletonBg,
-                borderRadius: borderRadiusStyle,
-              }}
-            />
-          </UiElementLayout>
+                borderRadius: THEME_RADIUS_PILL,
+                marginBottom: count === 1 ? 0 : THEME_SPACING_15,
+              },
+            ]}
+            isLoading
+          />
         );
       })}
-    </>
+    </UiElementLayout>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx b/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import Skeleton from 'react-loading-skeleton';
 
-import { THEME_RADIUS_8 } from '../../styles/ts/variables';
+import { THEME_RADIUS_8, THEME_SPACING_15 } from '../../styles/ts/variables';
 
 import { SkeletonProps } from './skeleton.interface';
 
@@ -32,6 +32,7 @@ const SkeletonView = ({
             key={i}
             width={width}
             height={circle ? '100%' : height}
+            style={{ marginBottom: count === 1 ? 0 : THEME_SPACING_15 }}
             borderRadius={THEME_RADIUS_8}
             circle={circle}
           />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
+    "postinstall": "sh ./tools/scripts/postinstall.sh",
     "prepare": "husky",
     "lint-staged": "npx lint-staged --verbose"
   },
@@ -52,6 +53,7 @@
     "react-native-dotenv": "^3.4.11",
     "react-native-error-boundary": "^1.2.4",
     "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated-skeleton": "^1.5.1",
     "react-native-svg": "15.2.0",
     "react-native-svg-transformer": "^1.5.0",
     "react-native-web": "~0.19.11",
@@ -62,7 +64,8 @@
     "tslib": "^2.3.0",
     "usehooks-ts": "^3.1.0",
     "yup": "^1.4.0",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.4",
+    "expo-linear-gradient": "~13.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

diff --git a/tools/scripts/postinstall.sh b/tools/scripts/postinstall.sh
@@ -0,0 +1,6 @@
+# Simple script to make react-native-reanimated-skeleton work in expo
+echo "Running postinstall script for react-native-reanimated-skeleton to support expo"
+
+# Replace react-native-linear-gradient with expo-linear-gradient and LinearGradient import to { LinearGradient } with the
+# react-native-reanimated-skeleton node_module package
+find ./node_modules/react-native-reanimated-skeleton -type f -exec sed -i '' -e 's/import LinearGradient/import { LinearGradient }/g' -e 's/react-native-linear-gradient/expo-linear-gradient/g' {} +