✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	1d77332
🔍 Latest deploy log	https://app.netlify.com/sites/livecodes/deploys/67df307f97eb3d000837d447
😎 Deploy Preview	https://deploy-preview-768--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Thank you, @FathyMuhamed

I like this. It is indeed an improvement.

I have some comments/suggestions:

• Let's try/explore other animations e.g. bounce, pulse effect with changing size or something like this. We can use LiveCodes for demos (e.g. https://livecodes.io/?x=id/vnqj3f3s7wa)
• I think we should keep the loading text (but remove the SVG spinner). This would be specially useful for embedded playgrounds, so that users would know what they are expecting to load.
• I originally linked to livecodes-logo.svg because it is being used again in the app header. But since the loading image is not used again, we may just inline it as svg element in the html page (like we do with CSS) and get rid of the extra network request. At this point we need to show something to the user as fast as possible.
• We need to consider minifying this html page in the build step, specially after inlining the svg image. (I can do that)

Please let me know what you think.
Thanks again :)

@hatemhosny first thank you for your comments and suggestions!

I’ve worked on two more SVG animations—could you review them and help me choose the best one? I’m leaning toward the second option

Suggestion1: https://livecodes.io/?x=id/ufhm7qexbpj

Suggestion2: https://livecodes.io/?x=id/53e2bkqp7xv

@hatemhosny first thank you for your comments and suggestions!

I’ve worked on two more SVG animations—could you review them and help me choose the best one? I’m leaning toward the second option

Suggestion1: https://livecodes.io/?x=id/ufhm7qexbpj

Suggestion2: https://livecodes.io/?x=id/53e2bkqp7xv

I also prefer the second one 👍

This might be simpler code: https://livecodes.io/?x=id/9erqygja3jc

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@hatemhosny After update animation 👍🏻

Thank you, @FathyMuhamed
That looks nice.

I will merge this now and then I will implement HTML minification in a separate PR, isA.

Thank you :)

This is now on the development build on: https://dev.livecodes.io/

It will be on the main website in the next release isA.

Thank you 🌹

@FathyMuhamed
HTML minification was implemented in #774 , in addition to a few CSS tweaks for compatibility with embedded playgrounds.
Thank you.

@FathyMuhamed

I have slightly modified the loading logo.
Demo: https://livecodes.io/?x=id/i86m73rkixq

Please have a look and let me know what you think.

@hatemhosny It is very amazing now, thanks for your wonderful work 🚀

@FathyMuhamed

This is now released:
https://github.com/live-codes/livecodes/releases/tag/v44

Thank you 🌹