From 2fff322de76e0a97dabb16bc718a6fef36dfaef9 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sun, 27 Dec 2020 00:55:22 +0100
Subject: [PATCH] Add menu row loading state

---
 src/components/Menu/Row.tsx         | 84 ++++++++++++++++++-----------
 src/screens/Me/Root/Collections.tsx |  3 +-
 src/screens/Me/Settings.tsx         |  6 +--
 3 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx
index 5f8fb177..43f4c901 100644
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -1,18 +1,22 @@
-import React from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'
-import { useTheme } from '@utils/styles/ThemeManager'
-
-import { ColorDefinitions } from '@utils/styles/themes'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { ColorDefinitions } from '@utils/styles/themes'
+import React, { useMemo } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
 
 export interface Props {
   iconFront?: any
   iconFrontColor?: ColorDefinitions
+
   title: string
   content?: string
+
   iconBack?: 'chevron-right' | 'check'
   iconBackColor?: ColorDefinitions
+
+  loading?: boolean
   onPress?: () => void
 }
 
@@ -22,12 +26,25 @@ const Core: React.FC<Props> = ({
   title,
   content,
   iconBack,
-  iconBackColor
+  iconBackColor,
+  loading = false
 }) => {
   const { theme } = useTheme()
   iconFrontColor = iconFrontColor || 'primary'
   iconBackColor = iconBackColor || 'secondary'
 
+  const loadingSpinkit = useMemo(
+    () => (
+      <View style={{ position: 'absolute' }}>
+        <Chase
+          size={StyleConstants.Font.Size.M * 1.25}
+          color={theme.secondary}
+        />
+      </View>
+    ),
+    [theme]
+  )
+
   return (
     <View style={styles.core}>
       <View style={styles.front}>
@@ -46,20 +63,32 @@ const Core: React.FC<Props> = ({
       {(content || iconBack) && (
         <View style={styles.back}>
           {content && content.length ? (
-            <Text
-              style={[styles.content, { color: theme.secondary }]}
-              numberOfLines={1}
-            >
-              {content}
-            </Text>
+            <>
+              <Text
+                style={[
+                  styles.content,
+                  {
+                    color: theme.secondary,
+                    opacity: !iconBack && loading ? 0 : 1
+                  }
+                ]}
+                numberOfLines={1}
+              >
+                {content}
+              </Text>
+              {loading && !iconBack && loadingSpinkit}
+            </>
           ) : null}
           {iconBack && (
-            <Feather
-              name={iconBack}
-              size={StyleConstants.Font.Size.M + 2}
-              color={theme[iconBackColor]}
-              style={styles.iconBack}
-            />
+            <>
+              <Feather
+                name={iconBack}
+                size={StyleConstants.Font.Size.M + 2}
+                color={theme[iconBackColor]}
+                style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
+              />
+              {loading && loadingSpinkit}
+            </>
           )}
         </View>
       )}
@@ -68,16 +97,13 @@ const Core: React.FC<Props> = ({
 }
 
 const MenuRow: React.FC<Props> = ({ ...props }) => {
-  const { theme } = useTheme()
-
-  return props.onPress ? (
-    <Pressable style={styles.base} onPress={props.onPress}>
+  return (
+    <Pressable
+      style={styles.base}
+      {...(!props.loading && props.onPress && { onPress: props.onPress })}
+    >
       <Core {...props} />
     </Pressable>
-  ) : (
-    <View style={styles.base}>
-      <Core {...props} />
-    </View>
   )
 }
 
@@ -119,8 +145,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(MenuRow, (prev, next) => {
-  let skipUpdate = true
-  skipUpdate = prev.content === next.content
-  return skipUpdate
-})
+export default MenuRow
diff --git a/src/screens/Me/Root/Collections.tsx b/src/screens/Me/Root/Collections.tsx
index 8bb8772a..39d11e9d 100644
--- a/src/screens/Me/Root/Collections.tsx
+++ b/src/screens/Me/Root/Collections.tsx
@@ -11,7 +11,7 @@ const Collections: React.FC = () => {
   const navigation = useNavigation()
 
   const queryKey = ['Announcements', { showAll: true }]
-  const { data } = useQuery(queryKey, announcementFetch)
+  const { data, isFetching } = useQuery(queryKey, announcementFetch)
 
   const announcementContent = useMemo(() => {
     if (data) {
@@ -55,6 +55,7 @@ const Collections: React.FC = () => {
         iconBack='chevron-right'
         title={t('content.collections.announcements')}
         content={announcementContent}
+        loading={isFetching}
         onPress={() =>
           data &&
           data.length &&
diff --git a/src/screens/Me/Settings.tsx b/src/screens/Me/Settings.tsx
index 9c703efd..55946e6e 100644
--- a/src/screens/Me/Settings.tsx
+++ b/src/screens/Me/Settings.tsx
@@ -26,9 +26,7 @@ const ScreenMeSettings: React.FC = () => {
 
   const [cacheSize, setCacheSize] = useState<number>()
   useEffect(() => {
-    const getCacheSize = async () =>
-      setCacheSize(await CacheManager.getCacheSize())
-    getCacheSize()
+    CacheManager.getCacheSize().then(size => setCacheSize(size))
   }, [])
 
   return (
@@ -127,7 +125,7 @@ const ScreenMeSettings: React.FC = () => {
       <MenuContainer>
         <MenuRow
           title={t('content.cache.heading')}
-          content={cacheSize ? prettyBytes(cacheSize) : undefined}
+          content={cacheSize ? prettyBytes(cacheSize) : '暂无缓存'}
           iconBack='chevron-right'
           onPress={async () => {
             await CacheManager.clearCache()