Due to business requirement, I need to include more than 30 Kendo Editor components in my React project, but the it is too slow to complete loading the page.
In my below testing code, it takes more than 10 seconds to load 50 empty Editors. I'm suspecting it is due to loading the the font icon of the toolbar of editor.
in Chrome dev tool, loading the embedded 'WebconponentsIcons.ttf' file takes 7 seconds. The font file is used to render the icons in toolbar of Editors as documented in https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
Searching in the forum, there is a similar thread on it for JQuery https://www.telerik.com/forums/editor-is-slow-with-toolbar-enabled. in test code of that thread https://dojo.telerik.com/aMUcArob/7, but the font file is get by separate HTTP request, rather than embedded in other resources.
Editor inline mode has the problem as well.
Any idea on how to resolve it?
Kendo UI version:
"@progress/kendo-editor-react-wrapper": "2018.2.620",
"@progress/kendo-theme-bootstrap": "^2.13.6",
"@progress/kendo-theme-default": "^2.54.0",
"@progress/kendo-ui": "2018.2.620",
RichTextEditor
import * as React from 'react';import '@progress/kendo-ui';import { Editor } from '@progress/kendo-editor-react-wrapper';interface IProps { onChanged?: Function; // this function will be called when editor losing focus (on blur) initialValue?: string; // a html string, such as '<strong>Hello World!</strong>'}export class RichTextEditor extends React.Component<IProps> { private initialValue: string; constructor(props: IProps) { super(props); this.initialValue = 'This is a simple sample to show initial value in the rich text editor.' } public render() { return ( <div> <Editor> <textarea> {this.initialValue} </textarea> </Editor> </div > ); }}
App
class App extends React.Component<{}, {}> { public render() { return ( <div> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> <RichTextEditor /> </div> ); }}ReactDOM.render( <App />, document.getElementById('react-app'));6 Answers, 1 is accepted
Thank you for all of the details.
I made a runnable example using the wrapper Editor, but I was not able to observe the same behavior.
I placed around 35 Editors and the page is loaded fast without any noticeable delays:
https://stackblitz.com/edit/react-bjv5s9?file=app/main.js
Could you please share how the theme is imported as this could result in importing files that are not needed in this case?
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for your reply!
I can see long-time issue on the icon font in the Chrome dev tool, please refer to the attached screenshot. In https://react-bjv5s9.stackblitz.io/ site, you need to check 'Disable Cache' in the dev tool to repro it consistently, otherwise the font file will be cached. This is different from my local testing environment which always needs long time to get the icon font file.
Thanks,
Andy.
Apologies, indeed I was not disabling the cache.
After I disabled to check the load time was increased significantly.
I will forward this to the developers' team so we can further investigate why this font is taking so long to download.
Regards,
Stefan
Progress Telerik
After different tests, we decided to log an issue as this seems like a very strange behavior.
We even added the standard jQuery Editor in the React application without the wrapper and the same issue was observed wherein the jQuery editor it is loaded fine:
https://github.com/telerik/kendo-react/issues/97
Please have in mind that the native Editor is in our short-term list for implementation.
We will ensure that the native version of the component will not face this issue.
I also added some Telerik points for bringing this to our attention.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for investigation and creating bug for tracking!
Regarding to the native Editor implementation, glad to hear that. What's the rough timeline to release it to customer?
Thanks,
Andy.
Currently, the Editor is planned for the beginning of the next year.
Still, we are constantly working to try to deliver crucial components such as the Editor as soon as possible.
Please stay tuned and monitor our Roadmap:
https://www.telerik.com/kendo-react-ui/roadmap/
It is planned to be started after the TreeView.
Regards,
Stefan
Progress Telerik