How to Display a Loading Spinner While Importing Word Documents 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.