Блог

Должны ли мы использовать компонент Loader (любой пользовательский загрузчик) в каждом компоненте и использовать выделенные переменные редуктора состояния для переключения его с помощью относительного вызова API или у нас должен быть загрузчик в корне приложения и переключать его на любой экземпляр API?

Если мы используем компонент корневого загрузчика, и у него есть свойства

 {position: 'absolute', top:0, bottom:0, right:0, left:0}
  

(Полноэкранный загрузчик). Хотя это избавило бы от многих строк кода для переключения каждого компонента загрузчика отдельно, но разве это не остановит пользователя с любой другой страницы, если одна конечная точка API выходит из строя или загружается слишком долго.

Какой была бы наилучшая практика?

Я оборачиваю весь свой экран пользовательским компонентом, поэтому у меня есть компонент, который оборачивается на весь экран, и я показываю загрузку этого компонента:

Компонент ScreenContainer:

 function ScreenContainer({
    barStyle = "dark-content",
    statusBarColor = Colors.whiteFFF,
    children,
    containerStyle,
    loading = false,
    translucent = false,
}: ScreenContainerProps) {
    useFocusEffect(
        React.useCallback(() => {
            StatusBar.setBarStyle(barStyle);
            StatusBar.setBackgroundColor(statusBarColor);
            StatusBar.setTranslucent(translucent);
        }, []),
    );
    return (
        <View
            style={[
                {
                    flex: 1,
                },
                containerStyle,
            ]}
        >
            {loading ? <LoadingOverlay show={loading} /> : null}
            {children}
        </View>
    );
}
  

Загрузка компонента Overlay:

 function LoadingOverlay({ show = false }: LoadingOverlayProps) {
    return (
        <Modal
            transparent
            visible={show}
            animated
            animationType="fade"
            presentationStyle="overFullScreen"
        >
            <StatusBar backgroundColor="rgba(0,0,0,0.3)" barStyle="light-content" />
            <View
                style={{
                    backgroundColor: "rgb(33, 33, 33)",
                    opacity: 0.4,
                    alignItems: "center",
                    justifyContent: "center",
                    flex: 1,
                }}
            >
                <TLoader />
            </View>
        </Modal>
    );
}