fix: unblock page rendering when Telegram CDN is unavailable

- Google Fonts: non-render-blocking via media="print" onload trick
- telegram-web-app.js: load only inside Telegram environment
- Telegram SDK init: skip entirely outside Telegram
- Script load timeout: 8000ms → 2000ms for faster deep link fallback
- Email login form: expanded by default (80% of registrations)
This commit is contained in:
c0mrade
2026-03-31 14:10:22 +03:00
parent 60f11e97a2
commit 826a82aa1c
4 changed files with 34 additions and 5 deletions

View File

@@ -18,8 +18,29 @@
<link <link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
media="print"
onload="this.media='all'"
/> />
<script src="https://telegram.org/js/telegram-web-app.js" async></script> <noscript>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</noscript>
<script>
// Load Telegram Web App script only inside Telegram environment
(function() {
var isTelegram = window.TelegramWebviewProxy ||
location.hash.indexOf('tgWebApp') !== -1 ||
location.search.indexOf('tgWebApp') !== -1;
if (isTelegram) {
var s = document.createElement('script');
s.src = 'https://telegram.org/js/telegram-web-app.js';
s.async = true;
document.head.appendChild(s);
}
})();
</script>
<style> <style>
body { body {
background-color: #0a0f1a; background-color: #0a0f1a;

View File

@@ -14,7 +14,7 @@ interface TelegramLoginButtonProps {
referralCode?: string; referralCode?: string;
} }
const SCRIPT_LOAD_TIMEOUT_MS = 8000; const SCRIPT_LOAD_TIMEOUT_MS = 2000;
const DEEPLINK_POLL_INTERVAL_MS = 2500; const DEEPLINK_POLL_INTERVAL_MS = 2500;
export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) { export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) {

View File

@@ -27,11 +27,16 @@ import { getCachedFullscreenEnabled, isTelegramMobile } from './hooks/useTelegra
import './i18n'; import './i18n';
import './styles/globals.css'; import './styles/globals.css';
// HMR guard — prevent double init when Vite hot-reloads the module // Only initialize Telegram SDK when running inside Telegram
const isTelegramEnv =
!!(window as unknown as Record<string, unknown>).TelegramWebviewProxy ||
location.hash.includes('tgWebApp') ||
location.search.includes('tgWebApp');
const HMR_KEY = '__tg_sdk_initialized'; const HMR_KEY = '__tg_sdk_initialized';
const alreadyInitialized = (window as unknown as Record<string, unknown>)[HMR_KEY] === true; const alreadyInitialized = (window as unknown as Record<string, unknown>)[HMR_KEY] === true;
if (!alreadyInitialized) { if (isTelegramEnv && !alreadyInitialized) {
(window as unknown as Record<string, unknown>)[HMR_KEY] = true; (window as unknown as Record<string, unknown>)[HMR_KEY] = true;
try { try {
@@ -77,6 +82,9 @@ if (!alreadyInitialized) {
miniAppReady(); miniAppReady();
} catch {} } catch {}
} else if (!isTelegramEnv) {
// Outside Telegram — still clear stale session tokens if any
clearStaleSessionIfNeeded(null);
} }
if ('requestIdleCallback' in window) { if ('requestIdleCallback' in window) {

View File

@@ -64,7 +64,7 @@ export default function Login() {
const [forgotPasswordSent, setForgotPasswordSent] = useState(false); const [forgotPasswordSent, setForgotPasswordSent] = useState(false);
const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false); const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
const [forgotPasswordError, setForgotPasswordError] = useState(''); const [forgotPasswordError, setForgotPasswordError] = useState('');
const [showEmailForm, setShowEmailForm] = useState(() => !!referralCode); const [showEmailForm, setShowEmailForm] = useState(true);
// Telegram safe area insets // Telegram safe area insets
const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK(); const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK();