diff --git a/src/components/common/Spinner.tsx b/src/components/common/Spinner.tsx
index 3bbd4dd7..c752b6df 100644
--- a/src/components/common/Spinner.tsx
+++ b/src/components/common/Spinner.tsx
@@ -1,23 +1,23 @@
 import React from 'react'
 import { View, StyleProp, ViewStyle, ActivityIndicator, TextStyle } from 'react-native'
 import { Text } from './Text'
-import { ITheme, useTheme } from '@src/theme'
+import { ITheme, SylCommon, useTheme } from '@src/theme'
 
 const Spinner = ({
   size = 'large',
   style,
   text
 }: {
-  size?: number | 'small' | 'large' | undefined
+  size?: 'small' | 'large' | undefined
   style?: StyleProp<ViewStyle>
   text?: string
 }) => {
   const { theme } = useTheme()
 
   return (
-    <View style={[styles.containerStyle(theme), style]}>
+    <View style={[SylCommon.Layout.fill, styles.containerStyle(theme), style]}>
       <ActivityIndicator size={size} color={theme.colors.secondary} />
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
         <Text adjustsFontSizeToFit={true} style={styles.textStyle(theme)}>
           {text}
         </Text>
@@ -30,14 +30,12 @@ export { Spinner }
 
 const styles = {
   containerStyle: (_theme: ITheme): ViewStyle => ({
-    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column'
   }),
   textStyle: (_theme: ITheme): TextStyle => ({
-    ..._theme.typography.captionText,
-    marginTop: _theme.spacing.small,
-    color: _theme.colors.secondary
+    ..._theme.typography.bodyText,
+    marginTop: _theme.spacing.small
   })
 }
diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
index 07310eda..92f9394a 100644
--- a/src/components/loading/index.tsx
+++ b/src/components/loading/index.tsx
@@ -4,12 +4,13 @@ import { ActivityIndicator, View } from 'react-native'
 
 interface IProps {
   visible: boolean
+  size?: number
 }
 
-const LoadingComponent = ({ visible }: IProps) => {
+const LoadingComponent = ({ visible, size = 70 }: IProps) => {
   const { theme } = useTheme()
 
-  return <View>{visible && <ActivityIndicator color={theme.colors.secondary} size={48} />}</View>
+  return <View>{visible && <ActivityIndicator color={theme.colors.secondary} size={size} />}</View>
 }
 
 const Loading = React.memo(LoadingComponent)
diff --git a/src/screens/common/WebLink.tsx b/src/screens/common/WebLink.tsx
index a7990429..d9763b23 100644
--- a/src/screens/common/WebLink.tsx
+++ b/src/screens/common/WebLink.tsx
@@ -14,7 +14,9 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
   const [loading, setLoading] = React.useState(true)
 
   useEffect(() => {
-    navigation.setOptions({ title: translate('placeholder.loading') })
+    if (loading) {
+      navigation.setOptions({ title: translate('placeholder.loading') })
+    }
   }, [])
 
   useLayoutEffect(() => {
@@ -32,7 +34,7 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
 
   return (
     <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
-      {loading && <Spinner style={{ height: '100%', marginTop: '50%', marginBottom: 10000 }} />}
+      {loading && <Spinner text="努力载入中..." />}
       <WebView
         originWhitelist={['*']}
         source={{ uri: route.params.url }}
@@ -45,7 +47,6 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
           console.warn('WebView error: ', nativeEvent)
         }}
         onLoadEnd={(syntheticEvent) => {
-          // update component to be aware of loading status
           const { nativeEvent } = syntheticEvent
           setLoading(false)