How to Display a Loading Spinner in React Rich Text Editor?

When working with the RichTextEditorComponent in React, it may be necessary to provide visual feedback to users during the import of large Word documents. A loading spinner can enhance the user experience by indicating that a process is ongoing.

This article outlines how to implement a loading spinner during the import process using the actionBegin and actionComplete events of the Rich Text Editor.

Step-by-Step Implementation

1. Import Required Modules: Import necessary components and spinner utilities.

import * as React from 'react';
import { useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import {createSpinner, showSpinner, hideSpinner} from '@syncfusion/ej2-popups';
import {RichTextEditorComponent, Toolbar, Inject, HtmlEditor, QuickToolbar, PasteCleanup, ImportExport,} 
from '@syncfusion/ej2-react-richtexteditor';

2. Define Spinner and Service URLs: Set up the backend service URLs for Word and PDF import/export.

const hostUrl = 'https://services.syncfusion.com/react/production/';

const importWord = {
  serviceUrl: hostUrl + 'api/RichTextEditor/ImportFromWord',
};

const exportWord = {
  serviceUrl: hostUrl + 'api/RichTextEditor/ExportToDocx',
  fileName: 'RichTextEditor.docx',
};

const exportPdf = {
  serviceUrl: hostUrl + 'api/RichTextEditor/ExportToPdf',
  fileName: 'RichTextEditor.pdf',
};

3. Create the Spinner on Mount: Use useEffect to create the spinner once the component is mounted.

useEffect(() => {
  createSpinner({
    target: document.getElementById('sample'),
  });
}, []);

4. Show Spinner on Import Start: Use the actionBegin event to show the spinner when the import process starts.

function actionBeginHandler(e) {
  if (e.requestType === 'Import') {
    setTimeout(() => {
      showSpinner(document.getElementById('sample'));
    }, 300); // Slight delay to ensure spinner visibility
  }
}

5. Hide Spinner on Import Completion: Use the actionComplete event to hide the spinner once the import is done.

function actionCompleteHandler(e) {
  if (e.requestType === 'Import') {
    setTimeout(() => {
      hideSpinner(document.getElementById('sample'));
    }, 200); // Small delay to let the content settle
  }
}

6. RichTextEditor Toolbar Configuration: Define the toolbar items.

const items = [ 'Undo', 'Redo', '|', 'ImportWord', 'ExportWord', 'ExportPdf', '|', 'Bold', 'Italic', 
'Underline', '|', 'SourceCode',];

const toolbarSettings = {
  items: items,
};

7. Render the RichTextEditorComponent: Use the RichTextEditorComponent with all configurations.

<RichTextEditorComponent
  id="toolsRTE"
  ref={(richtexteditor) => { editor = richtexteditor; }}
  value=""
  actionBegin={actionBeginHandler}
  actionComplete={actionCompleteHandler}
  toolbarSettings={toolbarSettings}
  placeholder="Type something or use @ to tag a user..."
  importWord={importWord}
  exportPdf={exportPdf}
  exportWord={exportWord}
>
  <Inject services={[ Toolbar, HtmlEditor, QuickToolbar, PasteCleanup, ImportExport,]}/>
</RichTextEditorComponent>

8. Customize Spinner Alignment

To enhance the visual alignment of the loading spinner during Word document import, add the following CSS. This vertically positions the spinner closer to the content center of the Rich Text Editor.

/* Align the spinner vertically at 30% from the top */
.e-spinner-pane .e-spinner-inner {
  top: 30%;
}

Additional References

• React RichTextEditor API component - Syncfusion

By following these steps, you can effectively display a loading spinner while importing Word documents in the React Rich Text Editor, improving the overall user experience.

Conclusion
I hope you enjoyed learning about How to Display a Loading Spinner While Importing Word Documents in React Rich Text Editor.

You can refer to our React Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Rich Text Editor example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!