Adds loading icons for when a PDF is loading

[hluedeke]

Pull Request Checklist

• [x] I have run yarn build to ensure that the project builds successfully.
• [x] I have updated CHANGELOG.md with the necessary changes made in this pull request.

Description

Adds a status enum for detecting PDF load status across the application (Load failure is not implemented yet). Adds a loading icon to the pdf canvas and to the upload file button. Disables upload file button when a PDF file is actively loading.

Related Issues

TODO

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pattern-projector	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2024 2:02pm

[courtneypattison]

Thank you! The main reason I'd like to add a loading indicator is for PDFs that take a long time to render. For example, A0 vogue patterns take around 10 seconds to load so sometimes people think they won't load at all. Unfortunately the load success from react-pdf just tells you when the PDF is loaded, not when it has completed rendering. Probably because when it's loaded and starts rendering you can see parts of it loading, however, we have it set up to load to an offscreen canvas first, then to the onscreen canvas to deal with line thickening. So all users see is a grey box when it's being loaded into the offscreen canvas (except on Safari because they don't support offscreen canvas).

Maybe set the load status to success when the offscreen canvas is being drawn onscreen? I'm not sure if waiting for all pages to hit this condition is necessary or just any of them. I can send you a mangled vogue A0 if you'd like something for testing.

[hluedeke]

Maybe set the load status to success when the offscreen canvas is being drawn onscreen?

Ok 👍

I can send you a mangled vogue A0 if you'd like something for testing.

Yes! That would be super helpful! All of my pdfs were loading subsecond, so I had to end up testing by "faking" a long load time 😅 having an example to test with would be great!

[courtneypattison]

Will do! You're going to be shocked at how long it takes to load. I've tried opening them in Inkscape to check out why they're so bad and investigating always causes Inkscape to crash. So many paths! Love the patterns though!

[hluedeke]

I ended up leaving the loading icon in the top left corner of the canvas because I thought it would be best to minimize the amount of displacement the pdf would experience when the loading icon was showing. I'm not sure if this is the right method, or if we should attempt some sort of absolute positioning from within the canvas. Or maybe we should remove the loading icon from the transformed container entirely (though that has its own set of drawbacks). It's at least there for now

[hluedeke]

Checkout out PR #298 which has these changes and additionally a loading icon for line thickness.