Complete new group flow and speed up groups loading

Views/Groups.js

@@ -1,24 +1,57 @@
 import React, { useEffect, useRef } from "react";
 import { Searchbar, Title, IconButton } from 'react-native-paper';
-import { StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList, View, ActivityIndicator } from 'react-native';
 import API from "../API";
 import GroupCard from "../components/GroupCard";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const GROUPS_CACHE_KEY = 'groups_following';
+
+const storeGroupsCache = async (value) => {
+    try {
+        const jsonValue = JSON.stringify(value || []);
+        await AsyncStorage.setItem(GROUPS_CACHE_KEY, jsonValue);
+    } catch (e) {
+    }
+};
+
+const getGroupsCache = async () => {
+    try {
+        const value = await AsyncStorage.getItem(GROUPS_CACHE_KEY);
+        if (value !== null) return JSON.parse(value);
+        return [];
+    } catch (e) {
+        return [];
+    }
+};
 
 const Groups = ({navigation}) => {
     const [searchQuery, setSearchQuery] = React.useState('');
     const [searchVisible, setSearchVisible] = React.useState(false);
     const [groups, setGroups] = React.useState([]);
-    const [queryTimer, setQueryTimer] = React.useState(0);
+    const [loading, setLoading] = React.useState(true);
     const searchTextBox = useRef(null);
+    const queryTimer = useRef(null);
 
     useEffect(() => {
         let subscribed = true;
-        API.getFollowingGroups('').then((data) => {
-            if (subscribed)
-                setGroups(data?.groups || []);
-        });
+        const getData = async () => {
+            const cached = await getGroupsCache();
+            if (subscribed) setGroups(Array.isArray(cached) ? cached : []);
+            API.getFollowingGroups('').then((data) => {
+                if (!subscribed) return;
+                const liveGroups = Array.isArray(data?.groups) ? data.groups : [];
+                setGroups(liveGroups);
+                storeGroupsCache(liveGroups);
+                setLoading(false);
+            }).catch(() => {
+                if (subscribed) setLoading(false);
+            });
+        };
+        getData();
         return () => {
             subscribed = false;
+            if (queryTimer.current) clearTimeout(queryTimer.current);
         }
     }, [])
 
@@ -26,19 +59,23 @@ const Groups = ({navigation}) => {
 
     const onChangeSearch = query => {
         setSearchQuery(query);
-        if (queryTimer) clearTimeout(queryTimer);
-        let timerId = setTimeout(() => {
+        if (queryTimer.current) clearTimeout(queryTimer.current);
+        setLoading(true);
+        queryTimer.current = setTimeout(() => {
             if (!query) {
                 return API.getFollowingGroups('').then((data) => {
-                    setGroups(data.groups || []);
+                    const followingGroups = Array.isArray(data?.groups) ? data.groups : [];
+                    setGroups(followingGroups);
+                    storeGroupsCache(followingGroups);
+                    setLoading(false);
                 });
             }
             API.searchGroups(query).then((data) => {
-                setGroups(data.groups || []);
+                setGroups(Array.isArray(data?.groups) ? data.groups : []);
+                setLoading(false);
             })
 
         }, 300);
-        setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
         return (<GroupCard profileObj={item} />);
@@ -93,6 +130,9 @@ const Groups = ({navigation}) => {
                 }
                 style={{backgroundColor: "#edf2f7",}}
             />
+            {loading && !groups.length ? (
+                <ActivityIndicator style={styles.loader} />
+            ) : <></>}
         </SafeAreaView>
     )
 }
@@ -110,5 +150,10 @@ const styles = StyleSheet.create({
         marginTop: 15,
         fontWeight: "bold",
         color: "#777"
+    },
+    loader: {
+        position: "absolute",
+        alignSelf: "center",
+        top: 90,
     }
 });