Merge pull request #2 from siddsarkar/custom-loader

Custom loader

README.md

@@ -26,6 +26,7 @@ Head over to [releases](https://github.com/siddsarkar/SociQuote/releases) to gra
 
 [MIT](https://github.com/siddsarkar/SociQuote/blob/main/LICENSE)
 
-## Todos 
+## Todos
 
-- [ ] Custom loader
+- [x] Custom loader
+- [ ] Add share options(to ui element)

android/app/src/main/res/drawable/background_splash.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/background" />
-    <item android:drawable="@mipmap/ic_launcher" android:height="160dp" android:width="160dp" android:gravity="center" />
+    <item android:drawable="@drawable/ic_logo_square" android:height="160dp" android:width="160dp" android:gravity="center" />
 </layer-list>

package.json

@@ -16,18 +16,20 @@
     "appcenter-analytics": "^4.3.0",
     "appcenter-crashes": "^4.3.0",
     "react": "17.0.2",
-    "react-native": "0.65.1",
-    "react-native-splash-screen": "^3.2.0"
+    "react-content-loader": "^6.0.3",
+    "react-native": "0.66.0",
+    "react-native-splash-screen": "^3.2.0",
+    "react-native-svg": "^12.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "7.14.0",
-    "jest": "^26.6.3",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "babel-jest": "^27.2.4",
+    "eslint": "7.32.0",
+    "jest": "^27.2.4",
     "metro-react-native-babel-preset": "^0.66.0",
-    "react-native-codegen": "^0.0.7",
+    "react-native-codegen": "^0.0.8",
     "react-test-renderer": "17.0.2"
   },
   "jest": {

src/components/common/Caraousel/Caraousel.js

@@ -41,7 +41,6 @@ const Slide = memo(function Slide({data}) {
   return (
     <View style={s.slide}>
       <Text style={s.quoteSymbol}>〃</Text>
-
       <Text onLongPress={onShare} style={s.slideText}>
         {data.content}
       </Text>

src/components/common/PopupMenu/PopupMenu.js

@@ -0,0 +1,3 @@
+/**
+ * TODO: https://cmichel.io/how-to-create-a-more-popup-menu-in-react-native
+ */

src/views/Home/HomeScreen.js

@@ -1,14 +1,24 @@
 import React, {useEffect, useState} from 'react';
-import {
-  ActivityIndicator,
-  RefreshControl,
-  ScrollView,
-  Text,
-  View,
-} from 'react-native';
+import ContentLoader, {Rect} from 'react-content-loader/native';
+import {RefreshControl, ScrollView, Text, View} from 'react-native';
 import api from '../../api';
 import {Caraousel} from '../../components/common';
 
+const QuoteSkeletonLoader = props => (
+  <ContentLoader
+    speed={0.8}
+    width={300}
+    height={42}
+    viewBox="0 0 300 22"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#000"
+    {...props}
+  >
+    <Rect x="0" y="10" rx="0" ry="0" width="300" height="6" />
+    <Rect x={(400 - 178) / 3} y="26" rx="0" ry="0" width="178" height="6" />
+  </ContentLoader>
+);
+
 const HomeScreen = () => {
   const [data, setData] = useState([]);
   const [page, setPage] = useState(1);
@@ -17,6 +27,7 @@ const HomeScreen = () => {
 
   const onRefresh = () => {
     setRefreshing(true);
+    setIsLoading(true);
     async function fetchData() {
       const response = await api.quotable.getQuotes({
         limit: 10,
@@ -26,6 +37,7 @@ const HomeScreen = () => {
       setPage(response.page + 1);
       setData(response.results);
       setRefreshing(false);
+      setIsLoading(false);
     }
 
     fetchData();
@@ -39,17 +51,21 @@ const HomeScreen = () => {
 
       setIsLoading(false);
     }
-
+    setIsLoading(true);
     fetchData();
   }, []);
 
   const backgroundStyle = {flex: 1};
-  const textStyle = {color: '#fff', marginTop: 8};
+  const textStyle = {
+    fontSize: 35,
+    color: 'white',
+    textAlign: 'center',
+  };
 
   return isLoading ? (
     <View>
-      <ActivityIndicator color="#fff" size="large" />
-      <Text style={textStyle}>Loading...</Text>
+      <Text style={textStyle}>〃</Text>
+      <QuoteSkeletonLoader />
     </View>
   ) : (
     <ScrollView