Added spinner on first load

This commit is contained in:
keplyx 2019-08-06 14:06:05 +02:00
parent 405f1769d3
commit c60fb5291c
3 changed files with 294 additions and 289 deletions

View file

@ -2,7 +2,7 @@
import * as React from 'react';
import WebDataManager from "../utils/WebDataManager";
import {Container, H3, Tab, TabHeading, Tabs, Text} from "native-base";
import {Container, H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base";
import CustomHeader from "./CustomHeader";
import {RefreshControl, SectionList, View} from "react-native";
import CustomMaterialIcon from "./CustomMaterialIcon";
@ -50,7 +50,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
* Get the translation for the header in the current language
* @return {string}
*/
getHeaderTranslation() : string {
getHeaderTranslation(): string {
return "Header";
}
@ -152,10 +152,11 @@ export default class FetchedDataSectionList extends React.Component<Props, State
* No need to be overridden, has good defaults.
*
* @param text
* @param isSpinner
* @param icon
* @return {*}
*/
getEmptyRenderItem(text: string, icon: string) {
getEmptyRenderItem(text: string, isSpinner: boolean, icon: string) {
return (
<View>
<View style={{
@ -165,11 +166,14 @@ export default class FetchedDataSectionList extends React.Component<Props, State
height: 100,
marginBottom: 20
}}>
{isSpinner ?
<Spinner/>
:
<CustomMaterialIcon
icon={icon}
fontSize={100}
width={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
</View>
<H3 style={{
@ -209,6 +213,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
text: this.state.refreshing ?
i18n.t('general.loading') :
i18n.t('general.networkError'),
isSpinner: this.state.refreshing,
icon: this.state.refreshing ?
'refresh' :
'access-point-network-off'
@ -256,7 +261,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
}
renderItem={({item, section}) =>
isEmpty ?
this.getEmptyRenderItem(item.text, item.icon) :
this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
this.getRenderItem(item, section, dataset)
}
style={{minHeight: 300, width: '100%'}}

View file

@ -2,14 +2,14 @@
import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native";
import {Dimensions, PixelRatio, Platform} from "react-native";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
export default {
platformStyle,
@ -226,7 +226,7 @@ export default {
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#45D56E",
defaultSpinnerColor: "#e42612",
inverseSpinnerColor: "#1A191B",
// Tab
@ -258,7 +258,7 @@ export default {
// CUSTOM
customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText : "#898989",
fetchedDataSectionListErrorText: "#898989",
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)",

View file

@ -2,7 +2,7 @@
import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native";
import {Dimensions, PixelRatio, Platform} from "react-native";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
@ -226,7 +226,7 @@ export default {
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#45D56E",
defaultSpinnerColor: "#e42612",
inverseSpinnerColor: "#1A191B",
// Tab
@ -258,7 +258,7 @@ export default {
// CUSTOM
customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText : "#acacac",
fetchedDataSectionListErrorText: "#acacac",
// PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)",