import { useNavigation } from '@react-navigation/native' import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { ActivityIndicator, StyleSheet, View } from 'react-native' import WebView from 'react-native-webview' import { HeaderBar, SafeAreaContainer, Text } from '@/componentsV2' import { ArrowLeft } from '@/componentsV2/icons/LucideIcon' import { useAppDispatch, useAppSelector } from '@/store' import { setHtmlPreviewContent } from '@/store/runtime' import type { HomeNavigationProps } from '@/types/naviagate' export default function HtmlPreviewScreen() { const { t } = useTranslation() const navigation = useNavigation() const dispatch = useAppDispatch() const htmlContent = useAppSelector(state => state.runtime.htmlPreviewContent) const htmlSizeBytes = useAppSelector(state => state.runtime.htmlPreviewSizeBytes) const [isLoading, setIsLoading] = useState(true) const MAX_HTML_SIZE_BYTES = 2 * 1024 * 1024 const shouldShowLoading = htmlSizeBytes > MAX_HTML_SIZE_BYTES useEffect(() => { return () => { dispatch(setHtmlPreviewContent({ content: null, sizeBytes: 0 })) } }, [dispatch]) const handleBack = () => { navigation.goBack() } const fullHtmlContent = ` ${htmlContent || ''} `.trim() return ( , onPress: handleBack }} /> {shouldShowLoading && isLoading && ( {t('html_preview.loading')} )} setIsLoading(true)} onLoadEnd={() => setIsLoading(false)} /> ) } const styles = StyleSheet.create({ loadingContainer: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', zIndex: 1 } })