struct LoginView: View {

    @StateObject var viewModel = LoginViewModel()

    var body: some View {
        VStack {
            Image("STREAMMARK")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 40)
                .padding(.all, 24)

            Text("Welcome to Stream Chat")
                .font(.title)
                .padding(.all, 8)

            Text("Select a user to try the iOS SDK:")
                .font(.body)
                .padding(.all, 8)
                .padding(.bottom, 16)

            List(viewModel.demoUsers) { user in
                Button {
                    viewModel.demoUserTapped(user)
                } label: {
                    DemoUserView(user: user)
                }
                .padding(.vertical, 4)
                .animation(nil)
            }
            .listStyle(.plain)

            Spacer()
        }
        .overlay(
            viewModel.loading ? ProgressView() : nil
        )
    }
}

@Composable
    private fun LoginScreen() {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Spacer(modifier = Modifier.height(32.dp))

            Icon(
                modifier = Modifier.size(width = 80.dp, height = 40.dp),
                painter = painterResource(id = R.drawable.ic_stream),
                contentDescription = null,
                tint = ChatTheme.colors.primaryAccent,
            )

            Spacer(modifier = Modifier.height(28.dp))

            Text(
                modifier = Modifier.padding(horizontal = 16.dp),
                text = stringResource(R.string.login_screen_title),
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                color = ChatTheme.colors.textHighEmphasis,
            )

            Spacer(modifier = Modifier.height(12.dp))

            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f),
            ) {
                items(items = LoginUsers.createUsers()) { loginUser ->
                    UserItem(loginUser = loginUser)

                    DividerItem()
                }
            }
        }
    }

mport React, { useState, useEffect } from 'react';

const LoginView = () => {
  const [viewModel, setViewModel] = useState(new LoginViewModel());
  const [loading, setLoading] = useState(viewModel.loading);

  useEffect(() => {
    // Assuming you have a way to update loading status in your view model
    const handleLoadingChange = () => setLoading(viewModel.loading);
    viewModel.onLoadingChange = handleLoadingChange;

    return () => {
      viewModel.onLoadingChange = null;
    };
  }, [viewModel]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <img
        src="path_to_STREAMMARK_image"
        style={{ height: '40px', aspectRatio: 'fit', padding: '24px' }}
        alt="STREAMMARK"
      />

      <h1 style={{ padding: '8px' }}>Welcome to Stream Chat</h1>
      <p style={{ padding: '8px', paddingBottom: '16px' }}>Select a user to try the iOS SDK:</p>

      <div style={{ width: '100%' }}>
        {viewModel.demoUsers.map(user => (
          <button key={user.id} onClick={() => viewModel.demoUserTapped(user)} style={{ padding: '4px', width: '100%', textAlign: 'left' }}>
            <DemoUserView user={user} />
          </button>
        ))}
      </div>

      {loading && <p>Loading...</p>}
    </div>
  );
};

export default LoginView;