Adding activity indicator on loads

components/KanjiCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { ActivityIndicator, Button, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useSelector } from 'react-redux';
 import { learnihonColors } from '../assets/colors';
@@ -19,7 +19,7 @@ const KanjiCard = () => {
             fontSize: "20em"
         }
     })
-
+    const [loadingSvg, setLoadingSvg] = useState(false);
     const [selectedItems, setSelectedItems] = useState<{ title: string, data: Kanji[] }[]>([]);
     const updateSelectedItems = (item: string, isSelected: Boolean) => {
         if (!isSelected) {
@@ -51,8 +51,10 @@ const KanjiCard = () => {
 
     const fetchXml = async () => {
         if (kanji) {
+            setLoadingSvg(true);
             const xml = await (await fetch(kanji?.image!)).text();
             setImgXml(xml);  
+            setLoadingSvg(false);
         }
     }
 
@@ -95,12 +97,18 @@ const KanjiCard = () => {
 
                     <Text style={kanjiCardStyle.text}>{kanji?.onyomi}</Text>
                     <Text style={kanjiCardStyle.text}>{kanji?.kunyomi}</Text>
-                    <SvgXml
+                    {loadingSvg ?
+                        (
+                            <View style = {kanjiCardStyle.loader}>
+                                <ActivityIndicator size="large" color={learnihonColors.main} />
+                            </View>
+                        )
+                        : (<SvgXml
                         xml={imgXml
                             .replace(/fill="#[0-9a-f]{6}"/g, `fill=${kanjiCardStyle.svg.color}`)}
                         width="200"
                         height="200"
-                />
+                    />)}
 
                 {!hasAnswered && (
                     <>
@@ -132,6 +140,12 @@ const kanjiCardStyle_light = StyleSheet.create({
         width: "100%",
         height: "100%"
     },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 200,
+        height: 200
+    },
     text: {
         color: "black"
     }
@@ -148,6 +162,12 @@ const kanjiCardStyle_dark = StyleSheet.create({
         width: "100%",
         height: "100%"
     },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 200,
+        height: 200
+    },
     text: {
         color: "white"
     }

components/KanjiPlaygroundList.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, useColorScheme, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, FlatList, StyleSheet, Text, TextInput, TouchableOpacity, useColorScheme, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
@@ -14,7 +14,7 @@ const KanjiPlaygroundList = () => {
     const kanjiPlaygroundListStyle = useColorScheme() == 'light' ? kanjiPlaygroundListStyle_light : kanjiPlaygroundListStyle_dark;
     const [search, setSearch] = React.useState("");
 
-
+    const [loadingList, setLoadingList] = useState(false);
     const searchResult: Kanji[] = useSelector(state => state.kanjiReducer.playgroundList);
     const dispatch = useDispatch();
 
@@ -29,20 +29,28 @@ const KanjiPlaygroundList = () => {
                 placeholderTextColor="gray"
                 value={search}
                 onChangeText={setSearch}
-                onBlur={async () => await (await searchKanjis(search.toLowerCase()))(dispatch)}
+                onBlur={async () => {
+                    setLoadingList(true);
+                    await (await searchKanjis(search.toLowerCase()))(dispatch);
+                    setLoadingList(false);
+                }}
             ></TextInput>
-            <FlatList 
-                numColumns={4}
-                data={searchResult}
-                renderItem={
-                    ({ item }) => (
-                        <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item))}} style={kanjiPlaygroundListStyle.entry}>
-                            <Text style={kanjiPlaygroundListStyle.entryText}>{item.character}</Text>
-                        </TouchableOpacity>
-                    )
-                }
-                keyExtractor={item => `basicListEntry-${item.character}`}>
-            </FlatList>
+            {loadingList ? (
+                <ActivityIndicator size="large" color={learnihonColors.main} />
+            ) : (
+                <FlatList
+                    numColumns={4}
+                    data={searchResult}
+                    renderItem={
+                        ({ item }) => (
+                            <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item)) }} style={kanjiPlaygroundListStyle.entry}>
+                                <Text style={kanjiPlaygroundListStyle.entryText}>{item.character}</Text>
+                            </TouchableOpacity>
+                        )
+                    }
+                    keyExtractor={item => `basicListEntry-${item.character}`}>
+                </FlatList>
+            )}
         </View>
     );
 };

package.json

@@ -18,6 +18,7 @@
     "@shopify/react-native-skia": "0.1.157",
     "expo": "~47.0.12",
     "expo-2d-context": "^0.0.3",
+    "expo-av": "~13.0.2",
     "expo-cli": "^6.3.0",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
@@ -31,8 +32,7 @@
     "react-native-web": "~0.18.9",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
-    "rn-perfect-sketch-canvas": "^0.3.0",
-    "expo-av": "~13.0.2"
+    "rn-perfect-sketch-canvas": "^0.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",