👉🏻 REQUEST: Skeleton Loading on Preview Page.

DunoLabs / invoicetor-landing

Build beautiful invoices for your business in no time 📜

https://invoicetor.works

MIT License

10 stars 2 forks source link

👉🏻 REQUEST: Skeleton Loading on Preview Page. #17

Closed wh0sumit closed 1 year ago

wh0sumit commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Is your feature request related to a problem? Please describe.

When there is no data on the editor page, the preview page displays an empty preview.

Describe the solution you'd like

when there is no data present on the invoice, we can display a skeleton loading.

Describe alternatives you've considered

No response

Additional context

No response

aadilkhalifa commented 1 year ago

Hi. Can I work on this?

wh0sumit commented 1 year ago

Hello @aadilkhalifa,

I'll assign this issue to you, but first It would be great if you could define your approach to building this feature!

aadilkhalifa commented 1 year ago

In Preview.jsx, I'm thinking of comparing the invoice object state with that of an empty invoice object.

If found to be the same, ie. no details have been added, display a skeleton loading similar to the one above with a message "Please enter details in the Editor tab to preview the invoice."

If the user has added details, display the invoice normally.

wh0sumit commented 1 year ago

I have assigned this issue to you @aadilkhalifa, looking forward to your contributions!

Happy Hacking ✨

aadilkhalifa commented 1 year ago

Hi @wh0sumit

I've worked on this and made a PR. Link to PR

Open to any feedback.

wh0sumit commented 1 year ago

Hey @aadilkhalifa, we're using chakra UI to create our UI and there is a skeleton component present, so there will be no need to add the external package to implement this feature.

Try to implement it in ChakraUI and then push the changes!

aadilkhalifa commented 1 year ago

Hey @wh0sumit. Thanks for pointing it out.

I've replaced the loading skeleton with the chakra UI component.

wh0sumit commented 1 year ago

Yes, I have seen it, one of our maintainers will review it and we'll get back to you soon!

wh0sumit commented 1 year ago

@aadilkhalifa, your changes are good, can you create a skeleton structure similar to the invoice we're developing: a preview file needs to be copied and then the data has to be changed with the skeleton loaded. You can also create a separate component within the folder for skeleton loading for preview!

aadilkhalifa commented 1 year ago

Hi @wh0sumit. I've updated the PR with the suggested change.