"requestAnimationFrame" in monaco editor appears and increase constantly

Viewed 98

I am working in a implementation of monaco editor. Everything works good but in the console appears the next warning:

[Violation] 'requestAnimationFrame' handler took 50ms

and marks that line:

    /**
     * A flag to indicate if currently handling a native requestAnimationFrame callback
     */
    let inAnimationFrameRunner = false;

in dom.ts file.

I made this question before but was stopped because I didn't put the code and I could not restore the question again but I still getting the warning, so, I created the post again and added the code.

The number of the warnings is increasing per seconds or milliseconds and I think that this makes the editior functionality a little slow after had show the warning near 800+ times. I added a picture with the message and the number 1753. I was finding about that in internet but I didn't found anything about this warning and monaco editor. Why is generated it ? What can I do to prevent it ? [Warning in chrome web tools ]

The below code is how I made the implementation. I am working with javascript/es6 and React, I have a class Editor that get monaco by requireJS and is called by the React class in the componentDidMount method.

class EditorModel {
    async init() {

        require(['vs/editor/editor.main'], monaco => {
            this._monaco = monaco;

            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
                noSemanticValidation: false,
                noSyntaxValidation: false
            });

            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                experimentalDecorators: true,
                allowSyntheticDefaultImports: true,
                jsx: this.monaco.languages.typescript.JsxEmit.React
            });
            // selector is the HTML Node
            const instance = monaco.editor.create(selector, {
                theme: 'vs-dark',
                language: 'typescript',
                wordWrap: 'on',
                automaticLayout: true

            });

            /**
             * File is an object that represents the file. It contains a
             * filename & source properties. The source contains the "code" property that
             * represents the content of the file.
             */
            const file = getFile();
            const uri = `/${file.filename}`;
            if (this._models.has(uri)) return this._models.get(uri);

            const model = monaco.editor.createModel(
                file.source.code,
                'typescript',// language
                monaco.Uri.file(uri) // uri
            );

            instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
                this.save();
            });
            instance.setModel(model);
            this._instance = instance;

        });

    }

    save() {
        // code to save....
    }

}

and Here is the code of the React Object

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {ready: false};
        this.vs = React.createRef();
        this.editor = props.editor; //  The Editor Model
        this.id = props.id;
        this.updateState = () => this.setState({});
    }

    
    componentDidMount(props) {
        this.editor.init(this.vs.current);
        this.editor.bind('change', this.updateState);
    }

    componentWillUnmount() {
        this.editor && this.editor.instance.dispose();
        this.controller.editors.delete(this.id, this.editor);
    }


    render() {

        return (

            <div className="ds-editor__container">
                <div className="vs-editor" ref={this.vs}/>
            </div>
        );
    }
}

Editor.contextType = EditorContext;

The number of the warnings is increasing per seconds or milliseconds and I think that this makes the editior functionality a little slow after had show the warning near 800+ times. I added a picture with the message and the number 1753. I was finding about that in internet but I didn't found anything about this warning and monaco editor. Why is generated it ? What can I do to prevent it ?

0 Answers
Related