added loader

6 files changed, 70 insertions, 48 deletions

diff --git a/components/Edit.jsx b/components/Edit.jsx
index b15b7fc..7d7f57f 100644
--- a/components/Edit.jsx
+++ b/components/Edit.jsx
@@ -1,7 +1,8 @@
-import { StyleSheet, Text, TextInput , View } from 'react-native'
+import { StyleSheet, TextInput , View } from 'react-native'
 import { useState, useEffect } from 'react'
 import { handleGetNote, handleCreateNote, handleEditNote } from '../utils/helpers'
 import Menu from './Menu'
+import Loader from './Loader'
 
 const Edit = ({ edit: note, setEdit, session, setSession, showError }) => {
   const [saving, setSaving] = useState()
@@ -39,7 +40,7 @@ const Edit = ({ edit: note, setEdit, session, setSession, showError }) => {
         />
         {
           content === undefined || saving
-            ? <Text style={styles.text}>{saving ? 'Saving...' : 'Loading content...'}</Text>
+            ? <Loader style={{paddingTop: 10}} text={saving ? 'Saving...' : 'Loading content...'} />
             : (
               <TextInput
                 placeholder="Content"
@@ -76,9 +77,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingVertical: 10,
   },
-  text: {
-    color: 'white',
-  }
 });
 
 export default Edit
diff --git a/components/List.jsx b/components/List.jsx
index 3e4e11c..07551ab 100644
--- a/components/List.jsx
+++ b/components/List.jsx
@@ -2,10 +2,11 @@ import { StyleSheet, Text } from 'react-native'
 import SwipeableFlatList from 'react-native-swipeable-list'
 import { useState, useEffect } from 'react'
 import { getList } from '../utils/api'
+import { handleRemove } from "../utils/helpers";
 import Note from './Note'
 import Menu from './Menu'
 import RemoveNoteButton from './RemoveNoteButton'
-import { handleRemove } from "../utils/helpers";
+import Loader from './Loader'
 
 const List = ({ session, setSession, showError, setEdit }) => {
   const [list, setList] = useState()
@@ -50,7 +51,7 @@ const List = ({ session, setSession, showError, setEdit }) => {
       />
       {
         loading || list === undefined
-          ? <Text style={styles.text}>Loading notes...</Text>
+          ? <Loader style={{ padding: 15 }} text="Loading notes..." />
           : (
             <SwipeableFlatList
               data={list.sort(sortFn)}
@@ -74,7 +75,7 @@ const List = ({ session, setSession, showError, setEdit }) => {
 const styles = StyleSheet.create({
   text: {
     color: 'white',
-    padding: 20,
+    padding: 15,
   },
 });
 
diff --git a/components/Loader.jsx b/components/Loader.jsx
new file mode 100644
index 0000000..1804502
--- /dev/null
+++ b/components/Loader.jsx
@@ -0,0 +1,20 @@
+import { Text } from 'react-native'
+import { useState, useEffect } from "react"
+
+const Loader = ({ style = {}, text = 'Loading...' }) => {
+  const [nr, setNr] = useState(0)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      nr < text.length
+        ? setNr(nr+1)
+        : clearTimeout(timer)
+    }, 50);
+
+    return () => clearTimeout(timer);
+  });
+
+  return <Text style={{ color: 'grey', ...style }}>{text.substring(0, nr)}</Text>
+}
+
+export default Loader
diff --git a/components/Login.jsx b/components/Login.jsx
index db4b15b..1a6ef92 100644
--- a/components/Login.jsx
+++ b/components/Login.jsx
@@ -1,47 +1,55 @@
 import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native'
 import { useState } from 'react'
 import { handleLogin } from '../utils/helpers'
+import Loader from './Loader'
 
 const Login = ({ setSession, showError }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;
+  const [loading, setLoading ] = useState(false)
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Login to Notes</Text>
-      <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
-      <TextInput
-        style={styles.input}
-        autoComplete="email"
-        placeholder="Email"
-        placeholderTextColor="#BBB"
-        keyboardType="email-address"
-        returnKeyType="next"
-        autoComplete="email"
-        textContentType="emailAddress"
-        value={email}
-        onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
-      />
-      <TextInput
-        style={styles.input}
-        autoComplete="password"
-        placeholder="Password"
-        placeholderTextColor="#BBB"
-        returnKeyType="next"
-        autoComplete="password-new"
-        secureTextEntry={true}
-        textContentType="newPassword"
-        value={password}
-        onChange={e => setPassword(e.nativeEvent.text)}
-      />
-      <Pressable
-        onPress={() => handleLogin({ email, password, setSession, showError })}
-        style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
-        disabled={disabled(email, password)}
-      >
-        <Text style={styles.buttonText}>Login</Text>
-      </Pressable>
+      {loading
+        ? <Loader style={{ width: 100 }} text="Signing in..." />
+        : (
+          <>
+          <Text style={styles.title}>Login to Notes</Text>
+          <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
+          <TextInput
+            style={styles.input}
+            autoComplete="email"
+            placeholder="Email"
+            placeholderTextColor="#BBB"
+            keyboardType="email-address"
+            returnKeyType="next"
+            autoComplete="email"
+            textContentType="emailAddress"
+            value={email}
+            onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
+          />
+          <TextInput
+            style={styles.input}
+            autoComplete="password"
+            placeholder="Password"
+            placeholderTextColor="#BBB"
+            returnKeyType="next"
+            autoComplete="password-new"
+            secureTextEntry={true}
+            textContentType="newPassword"
+            value={password}
+            onChange={e => setPassword(e.nativeEvent.text)}
+          />
+          <Pressable
+            onPress={() => handleLogin({ email, password, setSession, setLoading, showError })}
+            style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
+            disabled={disabled(email, password)}
+          >
+            <Text style={styles.buttonText}>Login</Text>
+          </Pressable>
+        </>
+      )}
     </View>
   );
 };
diff --git a/components/Main.jsx b/components/Main.jsx
index 3f48c3e..1885791 100644
--- a/components/Main.jsx
+++ b/components/Main.jsx
@@ -1,5 +1,6 @@
-import { List, Edit } from '.'
 import { useState } from 'react'
+import List from './List'
+import Edit from './Edit'
 
 const Main = ({ session, setSession, showError }) => {
   const [edit, setEdit] = useState(null)
diff --git a/components/index.js b/components/index.js
deleted file mode 100644
index 7323846..0000000
--- a/components/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Edit from './Edit'
-import List from './List'
-import Menu from './Menu'
-import Note from './Note'
-
-export { Edit, List, Menu, Note }