Improve loading wheel

[kwheelan]

Goal

Basically, we want to make the website look more professional by creating a better loading visual. I'm imagining a wheel in the center of the page that covers all the content and maybe has some process updates, like "Uploading documents.... Converting data... Validating XBRL.... Creating viewer...". But feel free to be a bit more creative.

Background

The web app is a Flask app. The ReadMe on the main branch gives an overview of the app's file structure. I think you should be able to do most adjustments through the css (and maybe some on the HTML template). Here are all the relevant files:

• app/static/css/style.css defines the loader class, which has all the style decisions
• app/routes.py -- the upload_file() is relevant for the loading wheel
• app/templates/site/home.html is the template for the home page that shows the loading wheel. Line 8 reads in the javascript, and lines 47-49 refer to the spinning wheel (loader).
• the app/js/spinner.js file contains all the javasript for the page. Feel free to split these functions into separate files if you like. The relevant function for the spinning wheel is startProcessing() (which also deals with the file uploads). Line 142 tells the page to unhide the spinner. You shouldn't have to mess with this function much, but feel free to adjust if you like.

Tasks

• [x] First, set up your environment and make sure you can run the app locally. Instructions are in the ReadMe on the main branch. Please let me know if you run into any issues getting the app to work locally.

Coding

• [ ] Make the loading wheel look better
• [x] Center it, and make it appear on top of the webpage (which should be covered by the wheel or made opaque)
• [ ] If possible, add text detailing the steps: uploading, processing, validating, creating viewer

[lucakato]

@kwheelan hi, I centered the wheel for now (vid below). Could you clarify what you mean by this part? make it appear on top of the webpage (which should be covered by the wheel or made opaque) https://github.com/closup/process-xbrl/assets/55814205/34e75d6f-c00e-4dc6-a4c4-a0e42492fed4 Thanks

[kwheelan]

That looks great! I just meant to have the wheel appear overlapping the content (as you've done). When you have a chance, could you also just confirm that the wheel acts as expected when you upload 2 excel files or 0 excel files? Both should give an error, and the wheel should disappear after you dismiss the dialog box.

[lucakato]

@kwheelan Yup the wheel acts as expected for those 2 cases.

I'm gonna see if I can add text detailing those steps. My thought is it only takes like 3s for the XBRL to complete (at least with Clayton ex) so I'm not sure if it makes sense to display each word 'uploading, processing, validating, creating viewer' within that time frame (I'm assuming your idea is displaying the word sequentially).

Maybe something like a simple progress bar might look better? Or a spinning wheel which acts a progress bar?

[kwheelan]

It's a lot slower when we add the Word documents or a longer excel sheet (it's the XBRL validation that takes the longest time). I also think there's some caching, so it takes longer with a document it hasn't seen before.

That being said, feel free to go for a progress bar/wheel instead of the words. Up to you

[lucakato]

I see. Is there an example of a longer excel sheet I can test it with?

[kwheelan]

I don't have an Excel sheet on hand, but try uploading the Excel sheet you have as well as the attached Word doc. For me, it takes ~20 seconds. CA Clayton 2022 Notes (with comments).docx