Add skeleton placeholders

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/index.ts

@@ -6,3 +6,4 @@ export { default as LoadingView } from './loadingView';
 export { default as MemeFail } from './memeFail';
 export { default as TagChip } from './tagChip';
 export { default as TextOverlay } from './textOverlay';
+export { default as ThemedSkeletonPlaceholder } from './themedSkeletonPlaceholder';

src/components/themedSkeletonPlaceholder.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentProps } from 'react';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useTheme } from 'react-native-paper';
+import { rgbToRgba } from '../utilities';
+
+const ThemedSkeletonPlaceholder = ({
+  ...props
+}: ComponentProps<typeof SkeletonPlaceholder>) => {
+  const { colors } = useTheme();
+
+  return (
+    <SkeletonPlaceholder
+      backgroundColor={rgbToRgba(colors.surfaceVariant, 0.2)}
+      highlightColor={rgbToRgba(colors.surfaceVariant, 0.7)}
+      {...props}
+    />
+  );
+};
+
+export default ThemedSkeletonPlaceholder;

src/screens/memes/memesList/memesGridItem.tsx

@@ -2,8 +2,9 @@ import React, { useMemo } from 'react';
 import { TouchableHighlight } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import FastImage from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { MEME_TYPE, Meme } from '../../../database';
-import { MemeFail } from '../../../components';
+import { MemeFail, ThemedSkeletonPlaceholder } from '../../../components';
 import { getFontAwesome5IconSize } from '../../../utilities';
 import { useMemeDimensions } from '../../../hooks';
 
@@ -35,7 +36,7 @@ const MemesGridItem = ({
         return (
           <FastImage
             source={{ uri }}
-            style={[{ width: itemWidth, height: itemWidth }]}
+            style={{ width: itemWidth, height: itemWidth }}
           />
         );
       }
@@ -45,7 +46,16 @@ const MemesGridItem = ({
     }
   }, [itemWidth, meme.memeType, uri]);
 
-  if (!error && (loading || !dimensions)) return <></>;
+  const skeletonComponent = useMemo(
+    () => (
+      <ThemedSkeletonPlaceholder>
+        <SkeletonPlaceholder.Item width={itemWidth} height={itemWidth} />
+      </ThemedSkeletonPlaceholder>
+    ),
+    [itemWidth],
+  );
+
+  if (!error && (loading || !dimensions)) return skeletonComponent;
 
   return (
     <TouchableHighlight onPress={focusMeme}>

src/screens/memes/memesList/memesListItem.tsx

@@ -3,8 +3,9 @@ import { StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import FastImage from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { MEME_TYPE, Meme } from '../../../database';
-import { MemeFail } from '../../../components';
+import { MemeFail, ThemedSkeletonPlaceholder } from '../../../components';
 import { useMemeDimensions } from '../../../hooks';
 
 const memesListItemStyles = StyleSheet.create({
@@ -54,7 +55,7 @@ const MemesListItem = ({
       case MEME_TYPE.IMAGE:
       case MEME_TYPE.GIF:
       case MEME_TYPE.VIDEO: {
-        return <FastImage source={{ uri }} style={[memesListItemStyles.image]} />;
+        return <FastImage source={{ uri }} style={memesListItemStyles.image} />;
       }
       default: {
         return <></>;
@@ -62,7 +63,19 @@ const MemesListItem = ({
     }
   }, [meme.memeType, uri]);
 
-  if (!error && (loading || !dimensions)) return <></>;
+  const skeletonComponent = useMemo(
+    () => (
+      <ThemedSkeletonPlaceholder>
+        <SkeletonPlaceholder.Item
+          width={listItemWidth.width + 75}
+          height={90}
+        />
+      </ThemedSkeletonPlaceholder>
+    ),
+    [listItemWidth.width],
+  );
+
+  if (!error && (loading || !dimensions)) return skeletonComponent;
 
   return (
     <TouchableRipple onPress={focusMeme} style={memesListItemStyles.view}>

src/screens/memes/memesList/memesMasonryItem.tsx

@@ -2,8 +2,9 @@ import React, { useMemo } from 'react';
 import { StyleSheet, TouchableHighlight } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import FastImage from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { MEME_TYPE, Meme } from '../../../database';
-import { MemeFail } from '../../../components';
+import { MemeFail, ThemedSkeletonPlaceholder } from '../../../components';
 import { getFontAwesome5IconSize } from '../../../utilities';
 import { useMemeDimensions } from '../../../hooks';
 
@@ -52,10 +53,7 @@ const MemesMasonryItem = ({
             source={{ uri }}
             style={[
               memeMasonryItemStyles.image,
-              {
-                width: itemWidth,
-                height: itemHeight,
-              },
+              { width: itemWidth, height: itemHeight },
             ]}
           />
         );
@@ -66,7 +64,20 @@ const MemesMasonryItem = ({
     }
   }, [itemHeight, itemWidth, meme.memeType, uri]);
 
-  if (!error && (loading || !dimensions)) return <></>;
+  const skeletonComponent = useMemo(
+    () => (
+      <ThemedSkeletonPlaceholder borderRadius={5}>
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemWidth}
+          style={memeMasonryItemStyles.view}
+        />
+      </ThemedSkeletonPlaceholder>
+    ),
+    [itemWidth],
+  );
+
+  if (!error && (loading || !dimensions)) return skeletonComponent;
 
   return (
     <TouchableHighlight onPress={focusMeme} style={memeMasonryItemStyles.view}>