Add loading animation for when playground generate models

[jonaslagoni]

Reason/Context

https://modelina.org/playground

When you change the input, open the playground, or change the settings, the playground need to ask the backend to re-generate the models, and there can be a significant delay here depending on input and latency to the backend server. Therefore I suggest we add a loading screen to the output models view that showcases that it is currently in the process of being generated.

You can find the most relevant code for the playground here: https://github.com/asyncapi/modelina/blob/master/modelina-website/src/components/playground/Playground.tsx

And the output panel can be found here: https://github.com/asyncapi/modelina/blob/master/modelina-website/src/components/playground/OutputNavigation.tsx

[Gmin2]

@jonaslagoni working on this

[Gmin2]

@jonaslagoni we want to add the loading screen in the output models only or in the whole screen ?

[jonaslagoni]

To me just the output models make sense to me, cause then the user can still change settings and input

@devilkiller-ag what do you think? 🤔

[devilkiller-ag]

To me just the output models make sense to me, cause then the user can still change settings and input

@devilkiller-ag what do you think? 🤔

I also think that showing the loader on the output screen only will make more sense.

[Gmin2]

check the PR added the loader in the output screen only

cc @jonaslagoni @devilkiller-ag

[ConnectBhawna]

If no one working on this issue would love to try it out @jonaslagoni @devilkiller-ag

[devilkiller-ag]

If no one working on this issue would love to try it out @jonaslagoni @devilkiller-ag

Hi @ConnectBhawna, you can work on this issue. Make sure to go through #1730 to know the approach of previous PR on this issue.

[devilkiller-ag]

Hi @ConnectBhawna, Do you have any updates on this?

[ConnectBhawna]

Yeahh almost done, will do the PR by this weekand

[devilkiller-ag]

Hi @ConnectBhawna, how's the work going on? Feel free to share if you are facing any issue.

[Alokih]

Hey @devilkiller-ag i want to work on this issue, but I am unable to setup this project, can you help me a little bit ?

[devilkiller-ag]

Hi @Alokih, you need to follow the instructions given in the readme file in the modelina-website folder. You need to first build the modelina using the command npm run build:modelina and then install the dependencies for the website.

[Alokih]

Thnx @devilkiller-ag

[Alokih]

Hey @devilkiller-ag I am attaching a screen recording, can you check it once , as you have not assigned me issue, can I create a PR ?

Screencast.from.15-06-24.10.46.05.PM.IST.webm

[devilkiller-ag]

Hey @devilkiller-ag I am attaching a screen recording, can you check it once , as you have not assigned me issue, can I create a PR ?

Screencast.from.15-06-24.10.46.05.PM.IST.webm

@Alokih this looks good to me. You can open a PR so that I can do further checks.

[Alokih]

@devilkiller-ag I just wanted to tell that I have taken help from previous PR which was closed

[Girishbari]

@devilkiller-ag getting this error when I ran modelina-website

can you please share workaround for this or should I create a issue

[devilkiller-ag]

@devilkiller-ag getting this error when I ran modelina-website
can you please share workaround for this or should I create a issue

Hi @Girishbari, Did you first build the modelina? First, you must run this command from inside the modelina-website folder: npm run build:modelina to build the modelina. I suggest you carefully follow the instructions in the website readme file. Goodluck! Feel free to ask any further questions if you get stuck.

[Girishbari]

thx, that really worked, I initally ran build command outside of modelina-website folder

[Shriya-Chauhan]

Hey! I would like to work on this issue. Could you please assign me this? @devilkiller-ag

[devilkiller-ag]

@Shriya-Chauhan Yeah sure, Go ahead!