From 890dba3201131d375c7ebcfa3b37e3576fa79b5b Mon Sep 17 00:00:00 2001
From: sa_yoshiii <sayako.yoshikawa1129@gmail.com>
Date: Tue, 5 Jul 2022 21:32:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0=E7=8A=B6=E6=85=8B=E3=81=AE=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Loading.jsx     | 13 ++++++++++++-
 src/screens/MemoListScreen.jsx |  6 +++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
index 97f5f98..d1bb6cb 100644
--- a/src/components/Loading.jsx
+++ b/src/components/Loading.jsx
@@ -1,7 +1,12 @@
+import { bool } from 'prop-types';
 import React from 'react';
 import { View, StyleSheet, ActivityIndicator } from 'react-native';
 
-function Loading() {
+function Loading(props) {
+  const { isLoading } = props;
+  if (!isLoading) {
+    return null;
+  }
   return (
     <View style={styles.container}>
       <View style={styles.inner}>
@@ -10,6 +15,12 @@ function Loading() {
     </View>
   );
 }
+Loading.propTypes = {
+  isLoading: bool,
+};
+Loading.defaultProps = {
+  isLoading: false,
+};
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
diff --git a/src/screens/MemoListScreen.jsx b/src/screens/MemoListScreen.jsx
index 6543142..7be1572 100644
--- a/src/screens/MemoListScreen.jsx
+++ b/src/screens/MemoListScreen.jsx
@@ -10,6 +10,7 @@ import Loading from '../components/Loading';
 function MemoListScreen(props) {
   const { navigation } = props;
   const [memos, setMemos] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     navigation.setOptions({
       // eslint-disable-next-line react/no-unstable-nested-components
@@ -21,6 +22,7 @@ function MemoListScreen(props) {
     const { currentUser } = firebase.auth();
     let unscribe = () => {};
     if (currentUser) {
+      setIsLoading(true);
       const ref = db
         .collection(`users/${currentUser.uid}/memos`)
         .orderBy('updatedAt', 'desc');
@@ -36,9 +38,11 @@ function MemoListScreen(props) {
             });
           });
           setMemos(userMemos);
+          setIsLoading(false);
         },
         (error) => {
           console.log(error);
+          setIsLoading(false);
           Alert.alert('データの読み込みに失敗しました');
         }
       );
@@ -48,6 +52,7 @@ function MemoListScreen(props) {
   if (memos.length === 0) {
     return (
       <View style={emptyStyles.container}>
+        <Loading isLoading={isLoading} />
         <View style={emptyStyles.inner}>
           <Text style={emptyStyles.title}>最初のメモを作成しよう！</Text>
           <Button
@@ -63,7 +68,6 @@ function MemoListScreen(props) {
   }
   return (
     <View style={styles.container}>
-      <Loading />
       <MemoList memos={memos} />
       <CircleButton
         name="plus"