React UIKit Chat showing "Trying to connect..." after logging in the app


Chat App showing “Trying to connect” after logging in the app and a user is unable to send a message:

It only works after a page refresh. Everything seems to be looking fine, the status is ‘authenticated’, we have the userId and APP_ID is correct.

[UIKit Version]

"@sendbird/chat": "^4.10.4",
    "@sendbird/uikit-react": "^3.9.3",
    "react": "18.2.0",
    "next": "13.4.11",

[Reproduction Steps]

  1. Create Custom ChatApp:
'use client';

import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeader';
import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
import { ChannelProvider } from '@sendbird/uikit-react/Channel/context';
import ChannelListUI from '@sendbird/uikit-react/ChannelList/components/ChannelListUI';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
import SBChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import { useMemo, useState } from 'react';

export default function ChatApp() {
    const [showSettings, setShowSettings] = useState(false);
    const [channelUrl, setChannelUrl] = useState<string>('');

    const query = useMemo(() => {
        return {
            channelListQuery: {
                includeEmpty: true,
    }, []);

    return (
        <div className="customized-app h-[calc(100dvh-12rem)]">
            <div className="sendbird-app__wrap">
                    onChannelSelect={(channel) => {
                        setChannelUrl(channel?.url ?? '');
                        renderHeader={() => (
                            <span className="text-[18px]/[24px] font-bold text-black">

                <div className="flex flex-grow">
                        onChatHeaderActionClick={() => {
                            renderChannelHeader={() => <ChannelHeader />}
            {showSettings && (
                <div className="sendbird-app__settingspanel-wrap">
                        onCloseClick={() => {
  1. Dynamic rendering of the component:
import dynamic from 'next/dynamic';

const DynamicChat = dynamic(
    () => import('@/components/dashboard/chats/Chats'),
        ssr: false,

export default function Page() {
    return <DynamicChat />;
  1. Create a Sendbird Provider:
'use client';

import SBProvider from '@sendbird/uikit-react/SendbirdProvider';
import enGB from 'date-fns/locale/en-GB';
import { useSession } from 'next-auth/react';
import { ReactNode } from 'react';

type ProviderProps = {
    children?: ReactNode;


export const SendbirdProvider = ({ children }: ProviderProps) => {
    const { data, status } = useSession();

    if (status === 'loading') {
        return <>Loading...</>;

    const myColorSet = {
        '--sendbird-light-primary-400': '#D9D9D9',
        '--sendbird-light-primary-300': '#474a50',
        '--sendbird-light-onlight-02': '#bdbdbd',
        '--sendbird-light-onlight-01': '#333333',
        '--sendbird-light-background-100': '#00FF9D',
        '--sendbird-light-background-200': '#00FF9D',

    return (
            appId={APP_ID ?? ''}
            // config={{ logLevel: 'debug' }}
  1. Wrap it around the app:
                <main className="h-auto min-h-screen">


Every time we login, and go to Chat part of the app.

[Current impact]

Bad UX, as they think it is not connecting at all, and after refresh it works…

Anyone anything?

I’ve found no solution to this issue other than refreshing the page, which is not ok.

I have found a possible issue and a temporary fix for it:

For some reason our state isOnline is set to false before the refresh, so I have manually set it to true.

globalStore.config.isOnline = true;

Currently using that while I wait for the response.

Hi @Lorena_Mrsic,

Apologize for the super delayed response on this topic. I’m curious if there are net console or network errors that may help indicate why this works? I’ll need to try and reproduce this given the information you provided in the OP but it would be nice to see if you can provide any other insight based on the network requests.

Hi Tyler,
No network errors, I have one error on route fetching and thats all.
And this is what I can see if I turn on debug log, I don’t know if that might help you?

We can see the channels, messages and everything popping up correctly, but isOnline (from what I found) is false, when it should be true: