[Update] wait for Desktop and Mobile svg

[GabeDiniz]

✨ Issue: #226
🔀 Branch: fix/226/loading-animation-on-mobile

✏ What was changed?

• LoadingAnimation waits for Desktop and Mobile SVG to load before displaying the page

[teoh4770]

Is it possible to do this @GabeDiniz
https://medium.com/geekculture/detecting-mobile-vs-desktop-browsers-in-javascript-ad46e8d23ce5

Just a thought

[GabeDiniz]

Is it possible to do this @GabeDiniz https://medium.com/geekculture/detecting-mobile-vs-desktop-browsers-in-javascript-ad46e8d23ce5

Yea its possible! I think I know how to do this with width sizes. The breakpoint for the 2 svgs are: Mobile < 640px <= Desktop
Do you think that would be fine?

[teoh4770]

Is it possible to do this @GabeDiniz medium.com/geekculture/detecting-mobile-vs-desktop-browsers-in-javascript-ad46e8d23ce5

Yea its possible! I think I know how to do this with width sizes. The breakpoint for the 2 svgs are: Mobile < 640px <= Desktop Do you think that would be fine?

yeah people has done that, but it is not that great

[teoh4770]

In the posts, it talks about the best practice of doing something like this.
I prefer this reasoning here "Use libraries to simplify detection and improve accuracy."

Best Practices

• Favor feature detection over user agent string detection whenever possible, as it is more reliable and future-proof.
• Use libraries to simplify detection and improve accuracy.
• Combine multiple techniques for more robust detection.
• Continuously test and update your detection code to ensure compatibility with new devices and browsers.

[teoh4770]

you can try use library like this? https://www.npmjs.com/package/react-device-detect

[juancwu]

In the posts, it talks about the best practice of doing something like this. I prefer this reasoning here "Use libraries to simplify detection and improve accuracy."

Best Practices

* Favor feature detection over user agent string detection whenever possible, as it is more reliable and future-proof.

* Use libraries to simplify detection and improve accuracy.

* Combine multiple techniques for more robust detection.

* Continuously test and update your detection code to ensure compatibility with new devices and browsers.

I don't particularly like the idea of using libraries just because it seems better. In our case, since the landing page will likely only be used this year, and next year will be updated, using a library is good. However, the use of a library also adds a new dependency, which can also be tech debt that we don't directly own. For something like detecting if its mobile/desktop, it can be easy enough that we don't have to rely on a library.

At the end of the day, people who make the libraries are human, and inaccuracy may still be present.

[GabeDiniz]

@juancwu @teoh4770 updated it :)

[teoh4770]

seems like it works :D @GabeDiniz