The compile method stops the animation animation

[New-King]

I Don't know if I'm doing it wrong, but I do have this problem.

Successful example # 1:

    Loading(1);      // Animation runs successfully
    await axios.get('https://dog.ceo/api/breeds/image/random');
    Loading(0);      // Animation ends successfully

Successful example # 2:

    console.log('start');    // start
    await compile(ALongText , {
        · · · 
    })
    console.log('end');    //end   (after 700ms)

Failure example # 1:

    Loading(1);      // Animation won't run
    await compile(ALongText , {
        · · · 
    })
    Loading(0);      // Animation won't run

Failure example # 2:
I have an svg element that has been rotating since the web page was loaded： <svg class="ani_spin"...>

If I run this code，The animation will stop immediately

    await compile(  ALongText , {
        · · · 
    })

If my mdx has 20,000 lines, it will take about 700ms to compile, then the animation will continue to run at 700ms，
So the animation won't run until 700ms later

[New-King]

New discovery: When the compile function is used, all js events and css renderings temporarily stop working. Maybe I insisted on compiling on the front end, but the official design was to compile back on the back end?Because I've done some processing, it's very convenient to compile on the front end, but I don't want it to stop working for a while

[wooorm]

I have no clue what your examples mean? This isn’t real code? What is Loading? Why do you use axios?

Is this about how to use await in React?

If my mdx has 20,000 lines

Sorry but what why how do you expect to compile 20k lines of MDX on the client in the same thread and think it’s all going to run smoothly?
It is intended that code uses as much of a thread as possible.
If you want different threads, use different threads!

That’s how code works: if you write an infinite loop, the entire thread is blocked, because it uses the entire thread.

[New-King]

I'm sorry, my expression may be wrong. Simply put, all animations will stop when parsing, so I give up using waiting animations。

Currently, I have a new question, I want to know what plug-ins can support the use of html comments?

The above code compilation will cause an error

[wooorm]

Yes, use threads. Put your stuff in a worker
MDX does not support HTML. So it doesn’t support HTML comments either. It supports JS. So it supports JS comments: {/* comment */}. For more on the syntax, see: MDX syntax

[New-King]

Thank you very very much!👍