How to show and hide spinner in Blazor Document Editor component
8 Jul 20243 minutes to read
Using Spinner
component, you can show/hide spinner while opening document in Blazor Word Processor
component (a.k.a Document Editor) component.
Example code snippet to show/hide spinner
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<SfSpinner @bind-Visible="@VisibleProperty">
</SfSpinner>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
}
Refer to the following example.
@using Syncfusion.Blazor.DocumentEditor
@using System.Net
@using Syncfusion.Blazor.Spinner
<div>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true Height="590px">
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
<SfSpinner @bind-Visible="@VisibleProperty">
</SfSpinner>
</div>
@code {
private bool VisibleProperty { get; set; } = false;
SfDocumentEditorContainer container;
string sfdtString;
protected override void OnInitialized()
{
string fileUrl = "https://www.syncfusion.com/downloads/support/directtrac/general/doc/Getting_Started1018066633.docx";
WebClient webClient = new WebClient();
byte[] byteArray = webClient.DownloadData(fileUrl);
Stream stream = new MemoryStream(byteArray);
//To observe the memory go down, null out the reference of byteArray variable.
byteArray = null;
WordDocument document = WordDocument.Load(stream, ImportFormatType.Docx);
stream.Dispose();
//To observe the memory go down, null out the reference of stream variable.
stream = null;
sfdtString = System.Text.Json.JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
}
public async void OnLoad(object args)
{
SfDocumentEditor editor = container.DocumentEditor;
// It will make the spinner visible
this.VisibleProperty = true;
await editor.OpenAsync(sfdtString);
await Task.Delay(1000);
// It will make the spinner hide
this.VisibleProperty = false;
//To observe the memory go down, null out the reference of sfdtString variable.
sfdtString = null;
}
}
NOTE
In above example, we have used Delay to hide spinner, just for demo purpose.