loader at login and register added

Deepak-Sangle · Dec 13, 2023 · f965af6 · f965af6
1 parent d8867d9
commit f965af6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 2 deletions.
diff --git a/mobile-client/src/screens/HomePage.js b/mobile-client/src/screens/HomePage.js
@@ -10,6 +10,7 @@ import {
   TouchableOpacity,
   Easing,
   Keyboard,
+  ActivityIndicator,
   ScrollView,
   ImageBackground,
 } from "react-native";
@@ -304,7 +305,9 @@ const HomePage = ({ route, navigation }) => {
                   {events!==undefined && <RenderAllEntries />}
               </View>
           </View>}
-
+          {selectedTab===1 && secondLoading && <View style={styles.loadingView}>
+            <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+          </View>}
 
         </ScrollView>
 

diff --git a/mobile-client/src/screens/Login.js b/mobile-client/src/screens/Login.js
@@ -1,18 +1,20 @@
 import React, { Component, useState, useRef } from 'react';
-import { Linking, View, Text, StyleSheet, TextInput, Button, TouchableHighlight, TouchableOpacity, Image, ScrollView, ImageBackground } from 'react-native';
+import { Linking, View, Text, StyleSheet, ActivityIndicator, TextInput, Button, TouchableHighlight, TouchableOpacity, Image, ScrollView, ImageBackground } from 'react-native';
 import styles from '../styles/login';
 
 const Login = ({navigation}) => {
 
   const [name, setName] = useState('');
   const [passcode, setPasscode] = useState(['','','','']);
+  const [loading, setLoading] = useState(false);
 
   const {BASE_URI, PRIMARY_COLOR} = require('../constant.js');
 
   const passcodeRefs = Array.from({ length: 4 }, () => useRef(null));
 
   const login = async () => {
     try{
+      setLoading(true);
       const res = await fetch(`${BASE_URI}/login`, {
         method : 'POST',
         headers: {
@@ -26,6 +28,7 @@ const Login = ({navigation}) => {
         })
       });
       const data = await res.json();
+      setLoading(false);
       if(data.success === true){
         navigation.navigate('/', {state : data.data});
       }
@@ -35,6 +38,7 @@ const Login = ({navigation}) => {
     }
     catch(e){
       alert(e.response.data.message);
+      setLoading(false);
     }
   }
 
@@ -117,6 +121,9 @@ const Login = ({navigation}) => {
 
         </View>
       </ImageBackground>
+      {loading && <View style={styles.loadingView}>
+        <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+      </View>}
     </ScrollView>
   )
 }

diff --git a/mobile-client/src/screens/Registration.js b/mobile-client/src/screens/Registration.js
@@ -6,6 +6,7 @@ import {
   TextInput,
   Button,
   TouchableHighlight,
+  ActivityIndicator,
   TouchableOpacity,
   Image,
   ScrollView,
@@ -22,6 +23,7 @@ const Registration = ({ navigation }) => {
   const [isAvailable, setIsAvailable] = useState(true);
   const [usersNames, setUsersNames] = useState([]);
   const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
   const [passcode, setPasscode] = useState("");
   const [cpasscode, setCpasscode] = useState("");
 
@@ -35,6 +37,7 @@ const Registration = ({ navigation }) => {
         alert("You have to make your password of exactly 4 digit long");
         return;
       }
+      setLoading(true);
       const res = await fetch(`${BASE_URI}/register`, {
         method: "POST",
         credentials : 'include',
@@ -49,12 +52,14 @@ const Registration = ({ navigation }) => {
         }),
       });
       const data = await res.json();
+      setLoading(false);
       if (data.success === true) {
         navigation.navigate("/login");
       } else {
         alert(data.message);
       }
     } catch (e) {
+      setLoading(false);
       alert(e.response.data.message);
     }
   };
@@ -66,6 +71,9 @@ const Registration = ({ navigation }) => {
       return;
     } else if (isAvailable && name !== "") {
       saveName();
+    } else if (!isAvailable) {
+      alert("Username is not available");
+      return;
     }
   }
 
@@ -194,6 +202,9 @@ const Registration = ({ navigation }) => {
           </View>
         </View>
       </ImageBackground>
+      {loading && <View style={styles.loadingView}>
+        <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+      </View>}
     </ScrollView>
   );
 };

diff --git a/mobile-client/src/styles/home.js b/mobile-client/src/styles/home.js
@@ -55,6 +55,13 @@ const styles = StyleSheet.create({
   entry: { 
     textAlign: "center" 
   },
+  loadingView : {
+    transform : "scale(1.5)",
+    display : "flex", 
+    height : HEIGHT,
+    justifyContent : "center", 
+    alignItems : "center"
+  },
   entryDate: { 
     margin: 0,
     display : "flex",

diff --git a/mobile-client/src/styles/login.js b/mobile-client/src/styles/login.js
@@ -18,6 +18,18 @@ const styles = StyleSheet.create({
     marginBottom : 10,
     fontFamily: "Inter_900Black"
   },
+  loadingView : {
+    transform : 'scale(1.5)',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor : "black",
+    opacity : 0.7,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   description: {
     fontFamily: "Nunito_400Regular",
     color : PRIMARY_COLOR,