WebASM TextBox extremely slow performance
Hello dear support.
I have weird experience with TextBox, since, it's my initial form the login - the things looks too frustrating.
When the page is loaded the placeholder and the placed data is on the same place and the animation even making the things worse.
As well the components which occupying space is rendered later, which making the whole thing to load like it's on old PC but I am running on 36 core pc with gtx 1080..
Here the code to reproduce all the issues above :
@page "/login"
@inherits LayoutComponentBase
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.Popups
@inject IJSRuntime JSRuntime;
@inject NavigationManager NavigationManager;
@Body
<table class="centerbox2x3" border="0">
<tr>
<td style="width:420px">
</td>
<td>
<table style="width:222px" border="0">
<tr style="height:46px">
<td>
</td>
</tr>
<tr>
<td>
<SfTextBox @ref="editCompany" Placeholder="e12DSw43" FloatLabelType="@FloatLabelType.Auto" Width="220" Value="Massimo"></SfTextBox>
</td>
</tr>
<tr>
<td>
<SfTextBox @ref="editUserName" Placeholder="eSSSw4#3" FloatLabelType="@FloatLabelType.Auto" Width="220" Value="LOUD"></SfTextBox>
</td>
</tr>
<tr>
<td>
<SfTextBox @ref="editPassword" Placeholder="ew43!^$#" FloatLabelType="@FloatLabelType.Auto" Width="220" Value="Aq#!@@"></SfTextBox>
</td>
</tr>
<tr style="height:16px">
<td>
</td>
</tr>
<tr>
<td style="float:right; right:10px">
<SfProgressButton @ref="buttonLogin" Content="Тест" OnClick="onBtnLoginClick" CssClass="e-danger">
<ProgressButtonSpinSettings Position="SpinPosition.Right"></ProgressButtonSpinSettings>
</SfProgressButton>
</td>
</tr>
<tr style="height:16px">
<td>
</td>
</tr>
<tr>
<td style="float:left">
<div style="height: 100%; width: 100%; display: flex;">
<div style="width:50%; ">
<SfMenu Items="@menuLnaguageItems">
<MenuEvents ItemSelected="onLanguageMenuItemSelected"></MenuEvents>
</SfMenu>
</div>
<div style="width:20%; " />
<div style="width:20%">
<SfMenu Items="@menuItems">
<MenuEvents ItemSelected="onContactMenuItemSelected"></MenuEvents>
</SfMenu>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style>
.centerbox2x3 {
width: 735px;
height: 508px;
position: fixed;
margin-left: -300px; /* half of width */
margin-top: -100px; /* half of height */
top: 30%;
left: 50%;
background-image: url('images/backgrounds/loginbkg1.jpg');
background-repeat: no-repeat;
}
.menu-control-login {
margin: 25px auto 0;
text-align: center;
}
</style>
@code
{
bool serverAvailable { get; set; } = true;
protected override void OnInitialized()
{
base.OnInitialized();
}
public SfTextBox editCompany;
public SfTextBox editUserName;
public SfTextBox editPassword;
public SfProgressButton buttonLogin;
public async Task onBtnLoginClick()
{
buttonLogin.Disabled = true;
}
public void onLoginComplete( bool isSuccess )
{
if( isSuccess == false )
{
// login failes message
}
}
private void onLanguageMenuItemSelected( Syncfusion.Blazor.Navigations.MenuEventArgs args )
{
}
private void onContactMenuItemSelected( Syncfusion.Blazor.Navigations.MenuEventArgs args )
{
switch( args.Item.Id )
{
default:
{
}
break;
}
}
private List<MenuItem> menuLnaguageItems = new List<MenuItem>
{
new MenuItem
{
Text = "BG",
Items = new List<MenuItem>
{
new MenuItem
{
Text = "BG",
Id = "1"
},
new MenuItem
{
Text = "EN",
Id = "2"
}
}
}
};
private List<MenuItem> menuItems = new List<MenuItem>
{
new MenuItem
{
Text = "тест1",
Items = new List<MenuItem>
{
new MenuItem
{
Text = "тест1",
Id = "1"
},
new MenuItem
{
Text = "тест1",
Id = "2"
},
new MenuItem
{
Text = "тест1",
Id = "3"
}
}
}
};
}
SIGN IN To post a reply.
4 Replies
1 reply marked as answer
BC
Berly Christopher
Syncfusion Team
July 1, 2020 10:53 AM UTC
Hi Yordan,
Greetings from Syncfusion support.
We were able to reproduce the reported issue at our end and this issue caused due to client-side Blazor application takes some time to load the components in the page. This delay leads to collide the placeholder and value in the TextBox component.
So, this delay issue will be fixed once native control implementation has been provided for the TextBox component. This support will be included in our upcoming Volume 2 Main release scheduled on 3rd July 2020.
Regards,
Berly B.C
YO
Yordan
July 1, 2020 11:55 AM UTC
Oww. Nice ! :) Thank You dear support.
BC
Berly Christopher
Syncfusion Team
July 7, 2020 10:32 AM UTC
Hi Yordan,
We are glad to announce that our Essential Studio 2020 Volume 2 release v18.2.0.44 is rolled out and is available for download under the following link.
We thank you for your support and appreciate your patience in waiting for this release. The fix for the issue “Delay rendering on TextBox component in web assembly application” is included in the above release.
Please get in touch with us if you would require any further assistance.
Regards,
Berly B.C
BC
Berly Christopher
Syncfusion Team
July 7, 2020 11:50 AM UTC
Hi Yordan,
We would like to inform you that we have introduced several API breaks in this release. We would like you to review the breaking changes from the below location before you upgrade.
Release notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=breaking-changes
Regards,
Berly B.C
Marked as answer
SIGN IN To post a reply.
