Image with loading animation

[fahad-israr]

• Image with loading animation:

• Ensure Lazy load[ i.e something is rendered until image is user is loaded on client's screen]

[dinskid]

I have some doubts regarding this. Can this be done without using an external library? Because, in react, we require images right? and that is synchronous. Is there a way to open images asynchronously. If so then we can simple have a small animation for the loading until the image is loaded.

Ex:
where instead of writing <img src={require("something.png")} /> we write, <img src={import("something.png") /> as import is async...

PS: I think I tried it once for reducing load time to convert it to PWA but I wasn't able to

[fahad-israr]

• Not sure try to see if you can using async(Yo gotta search a lot maybe :P).
• Also, see that we are already using react loadable (as you see in App.js);try if you can utilize that
• Lazy load is quite popular and widely used. If the above two don't work then try this.

[dinskid]

• I've searched for doing it without any library, but there is very little content for lazy loading without the use of a library and it is not useful anyways.
• It can be done using react loadable but the issue with this is that a loader doesn't accept arguments(checked it here) and that means for every image, we have to have a component as we cant have a high level image component and pass it different srcs. It would not just be tedious, but it would also be not be maintainable.

[fahad-israr]

cool cool.
I'd suggest to you to do it whatever way you feel would be feasible.
Also if you think its too much time taking you may leave it to do later as it is our lower priority.

[dinskid]

I guess it would be better to get the full site up and running so that is works well on PC and on mobile phones and then start with this - mainly because doing this research is taking a lot of time with very little progress.

[fahad-israr]

ack-I totally agree
go ahead and find the remaining things from iiitt.ac.in that have to be put in here to launch the website