Telegram Bot WebApp Long Loading

Question

I'm developing a telegram bot with a web app using React for the web interface and Node.js (node-telegram-bot-api) for the bot functionality. On some devices, the initial loading of the web app is fast, but sometimes (mostly on iPhones), the first load is really slow, taking 3-5 seconds. I'm using React. and call telegram web_appready() method as quickly as I can.

index.html

<head>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/logo.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Goodjoy</title>
</head>
<body class="loader">
<div id="root"></div>
 
<script>
    if (window.Telegram && window?.Telegram?.WebApp) {
        window.Telegram.WebApp.ready();
    }
</script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

bot.js

const bot = new TelegramBot(TOKEN, { polling: true });
const app = express();
app.use(express.json());
app.use(cors({
    origin: []
}));
const upload = multer();
app.use(express.json());
bot.onText(/\/start/, async (msg) => {
    console.log('start');
    const chatId = msg.chat.id;
    const telegramId = msg.from.id;
    try {
        await bot.sendMessage(chatId, 'Welcome to my bot', {
            reply_markup: {
                inline_keyboard: [
                    [{ text: 'Open web app', web_app: { url: webappurl } }]
                ]
            }
        });
    } catch (e) {
        console.log(e);
    }
});

Has anyone encountered this problem or has any ideas how to fix it?

I'm using React and utilizing the telegram's ready() method as quickly as possible. I've added it to the tag script in the body section of index.html. Additionally, I've attempted to create a preloader and added styles to index.html, but it ends up appearing at the end of the rendering process. As a result, users first see a white screen for 2-5 seconds, then the preloader appears for 1 second, and finally, the entire application is displayed.

Telegram Bot WebApp Long Loading

0 Answers0