Add Loader component and update SiteInformation and NavigationRow com…

…ponents

src/components/Loader.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  ViewStyle
+} from 'react-native'
+import Animated, {
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming
+} from 'react-native-reanimated'
+
+interface Props {
+  style?: StyleProp<ViewStyle>
+  disableAnimation?: boolean
+  shadowWidth?: number
+}
+
+const DEFAULT_SHADOW_WIDTH = 150
+export const LoadingView = ({
+  style,
+  disableAnimation,
+  shadowWidth = DEFAULT_SHADOW_WIDTH
+}: Props) => {
+  const window = useWindowDimensions()
+  const initialXValue = -window.width
+  const translateX = useSharedValue(initialXValue)
+
+  useEffect(() => {
+    if (disableAnimation) {
+      translateX.value = initialXValue
+      return
+    }
+
+    translateX.value = withDelay(
+      200,
+      withRepeat(
+        withTiming(window.width * 2, {
+          duration: 1500
+        }),
+        0,
+        false
+      )
+    )
+  }, [disableAnimation, initialXValue, translateX, window])
+
+  return (
+    <View style={[s.loading, style]}>
+      <Animated.View
+        style={[
+          s.shadow,
+          {
+            width: shadowWidth,
+            transform: [{ translateX }, { skewX: '15deg' }]
+          }
+        ]}
+      />
+    </View>
+  )
+}
+
+const s = StyleSheet.create({
+  loading: {
+    overflow: 'hidden',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)'
+  },
+  shadow: {
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.08)'
+  }
+})

src/components/SiteInformation.tsx

@@ -8,13 +8,15 @@ import { Card } from './Card'
 import { CardTitle } from './CardTitle'
 import { NavigationRow } from './row/NavigationRow'
 import useTimeAgo from '../hooks/time/useTimeFrom'
+import { InfoRow } from './row/InfoRow'
 
 type Props = {
   site: NetlifySite | undefined
   name?: string
+  loading: boolean
 }
 
-export const SiteInformation: FC<Props> = ({ site, name }) => {
+export const SiteInformation: FC<Props> = ({ site, name, loading }) => {
   const openSite = () => {
     Linking.openURL(`${site?.url}`)
   }
@@ -38,13 +40,15 @@ export const SiteInformation: FC<Props> = ({ site, name }) => {
           value={name}
           onPress={openSite}
         />
-        <NavigationRow title="Created" value={createdAt} />
-        <NavigationRow title="Last Publish" value={updatedAt} />
+        <InfoRow title="Created" value={createdAt} />
+        <InfoRow title="Last Publish" value={updatedAt} />
         <NavigationRow
+          loading={loading}
           title="Published Deploy"
           value={site?.published_deploy?.name}
         />
         <NavigationRow
+          loading={loading}
           type="navigation"
           hideDivider
           title="Manage site"
@@ -55,48 +59,3 @@ export const SiteInformation: FC<Props> = ({ site, name }) => {
     </>
   )
 }
-
-type RowProps = {
-  readonly last?: boolean
-}
-
-const Row = styled.View<RowProps>`
-  flex-direction: row;
-  align-items: center;
-  margin: 6px 0px;
-  padding-bottom: 8px;
-  border-bottom-width: ${({ last }) => (last ? 0 : StyleSheet.hairlineWidth)}px;
-  border-bottom-color: ${({ theme }) => theme.borderColor};
-`
-
-const LinkIcon = styled(FontAwesome5).attrs(({ theme }) => ({
-  name: 'link',
-  size: 12,
-  color: theme.secondaryTextColor
-}))`
-  margin-right: 8px;
-`
-
-const ClockIcon = styled(FontAwesome5).attrs(({ theme }) => ({
-  name: 'clock',
-  size: 12,
-  color: theme.secondaryTextColor
-}))`
-  margin-right: 8px;
-`
-
-const HistoryIcon = styled(FontAwesome5).attrs(({ theme }) => ({
-  name: 'history',
-  size: 12,
-  color: theme.secondaryTextColor
-}))`
-  margin-right: 8px;
-`
-
-const ToolsIcon = styled(FontAwesome5).attrs(({ theme }) => ({
-  name: 'tools',
-  size: 12,
-  color: theme.secondaryTextColor
-}))`
-  margin-right: 8px;
-`

src/components/row/NavigationRow.tsx

@@ -3,19 +3,22 @@ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
 import styled from 'styled-components/native'
 import { HStack } from '../layout/HStack'
 import { Typography } from '../layout/Typography'
+import { LoadingView } from '../Loader'
 
 type Props = {
   title: string
   value?: string | number
   hideDivider?: boolean
   type?: 'info' | 'navigation' | 'action'
+  loading?: boolean
 } & TouchableOpacityProps
 
 export const NavigationRow = ({
   title,
   value,
   type = 'info',
   hideDivider = false,
+  loading,
   ...buttonProps
 }: Props) => {
   return (
@@ -27,9 +30,13 @@ export const NavigationRow = ({
         <Typography className="">{title}</Typography>
 
         <HStack alignItems="center">
-          <Typography secondary className="text-right font-normal">
-            {value}
-          </Typography>
+          {loading ? (
+            <LoadingView style={{ height: 20, width: 100, borderRadius: 10 }} />
+          ) : (
+            <Typography secondary className="text-right font-normal">
+              {value}
+            </Typography>
+          )}
           {type === 'navigation' && <Chevron name="chevron-right" />}
         </HStack>
       </View>

src/views/Site.tsx

@@ -42,7 +42,11 @@ export const Site = ({
           <Animated.View>
             <Text />
           </Animated.View>
-          <SiteInformation site={site.data} name={name} />
+          <SiteInformation
+            loading={site.isLoading}
+            site={site.data}
+            name={name}
+          />
           <BuildSettings siteID={siteID} />
 
           {deploys.data && deploys.data.length > 0 && (

src/views/Sites.tsx

@@ -1,5 +1,4 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import { useLayoutEffect, useState } from 'react'
 import { ListRenderItem, RefreshControl } from 'react-native'
 import Animated, { FadeInLeft, FadeOutRight } from 'react-native-reanimated'
 import { SiteListItem } from '../components/SiteListItem'