Vue App UI is blocked completely for some time

[tsijercic1]

Bug description

It takes a long time for the content to show up in the editor. It blocks the whole UI of the app. This only happens in one case. The application shows task definitions (assignments) and allows editing those. Of 150 tasks, 1 of them opens reaaaally slow. Others open and show up immediately.

To Reproduce

This is an application that is used by a faculty, so you cannot access the app yourself, but I can taken screenshots of the UI that reproduce the behavior.

First click on task.html

This should open up the file on the right

First the file is empty and the UI is blocked for 7227 milliseconds (or 7.227 seconds which is too much)

After that it is shown in the editor

Expected behavior

It should open and show the file under a second because the file is really small. Other files that are bigger are opened under a second (Around 125 milliseconds). It should not block the whole UI for this amount of time.

Screenshots

Console log shown in the picture below Code that provides the log shown in the picture below body that is used as parameter in setHtml is shown below

{
  "success": true,
  "code": 200,
  "data": {
    "content": "<h1>Zadatak</h1>\n<p>Napišite funkciju pod imenom daj_prost koja nema parametara, a svaki put kada se pozove vraća sljedeći prost broj. Kada prvi put pozovete funkciju, ona treba vratiti broj 2, drugi put treba vratiti broj 3, zatim broj 5, 7, 11 itd.</p>\n<p>Ovu funkciju iskoristite u programu koji omogućuje korisniku da unese prirodne brojeve A i B takve da je A&lt;B, a zatim ispisuje sumu svih prostih brojeva strogo većih od A a strogo manjih od B. U ovom programu se obavezno mora iskoristiti napravljena funkcija daj_prost, ne smiju se računati prosti brojevi na neki drugi način.</p>\n<p>Primjer ulaza i izlaza:</p>\n<pre><code>    \n\tUnesite brojeve A i B: 0 15\n\tA nije prirodan broj.\n\tUnesite brojeve A i B: 5 -5\n\tA nije manje od B.\n\tUnesite brojeve A i B: 10 10\n\tA nije manje od B.\n\tUnesite brojeve A i B: -5 -7\n\tA nije prirodan broj.\n\tUnesite brojeve A i B: 2 10\n\tSuma prostih brojeva izmedju 2 i 10 je 15.\n</code></pre>\n<p>Objašnjenje: 3+5+7 = 15.</p>\n"
  }
}

Importing the editor here:

Using it here:

Editor options here:

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser chrome
• Version 86.0.4240.198 (Official Build) (64-bit)

This is a Vue 2 app

Additional context

The repository of the app can be found here https://github.com/tsijercic1/c9_admin_panel The particular component can be found here https://github.com/tsijercic1/c9_admin_panel/blob/master/src/components/gameComponents/FileEditor.vue

Tell me if you need some additional info

[seonim-ryu]

@tsijercic1 Thanks for the detailed explanation. But I cloned your project to check and then ran the server, but an error occurred so I couldn't check the problem. Is there any way to fix this or any other verification method?

[tsijercic1]

@seonim-ryu Because this is an app that is used by a faculty, the only way to access the data is to have credentials and the app must be on the same origin as the faculty server(API). I have deleted all the unnecessary things and pushed to this branch here https://github.com/tsijercic1/c9_admin_panel/tree/tui-editor When you install the dependencies and start the server, go to http://localhost:8080/panel. After that, click on task.html as shown in the picture: It should give the following result: It might be that the content of the "task.html" is somewhat special, but it really does take a lot of time to open it. Other contents are opened right away. You can check that by editing the content in src/services/game.service.js in the method getFileContent(). Btw, the content of all files is the same, I took the server response and pasted it in the service. Thank you for your time