feat: spinner for imports

[betodealmeida]

SUMMARY

Show a spinner during the import process.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

spinner_import.mov

TESTING INSTRUCTIONS

I modified the import API endpoint to sleep for 5 seconds, and imported a databaset.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #15055 (79f9d4c) into master (3f527c7) will decrease coverage by 0.00%.
The diff coverage is 61.53%.

❗ Current head 79f9d4c differs from pull request most recent head 7a1ce97. Consider uploading reports for the commit 7a1ce97 to get more accurate results

@@            Coverage Diff             @@
##           master   #15055      +/-   ##
==========================================
- Coverage   77.76%   77.75%   -0.01%     
==========================================
  Files         966      966              
  Lines       49628    49640      +12     
  Branches     6314     6320       +6     
==========================================
+ Hits        38591    38598       +7     
- Misses      10836    10840       +4     
- Partials      201      202       +1     

Flag	Coverage Δ
javascript	72.78% <61.53%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...rset-frontend/src/components/ImportModal/index.tsx	69.79% <61.53%> (-1.64%)	⬇️
...c/components/ErrorMessage/DatabaseErrorMessage.tsx	94.73% <0.00%> (ø)
.../components/ErrorMessage/ParameterErrorMessage.tsx	96.87% <0.00%> (ø)
...onents/ErrorMessage/ErrorMessageWithStackTrace.tsx	77.77% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3f527c7...7a1ce97. Read the comment docs.

[mistercrunch]

Wondering why we're hiding the context while the spinner is active context? We have a fair amount of "modal resizing" in the product currently (as dynamic content changes the height of the context) and it generally looks jittery. Keeping the context would prevent that.

Side note: can we re-style the button too? I know these file buttons are funky to style sometimes, but if we take over with an antd component maybe we can just disable the button while the spinner is active?

[betodealmeida]

Wondering why we're hiding the context while the spinner is active context? We have a fair amount of "modal resizing" in the product currently (as dynamic content changes the height of the context) and it generally looks jittery. Keeping the context would prevent that.

@mistercrunch I opted to hide the content because if we don't resize the modal the spinner was showing up on top of the filename, which was ugly.

Side note: can we re-style the button too? I know these file buttons are funky to style sometimes, but if we take over with an antd component maybe we can just disable the button while the spinner is active?

I wrote this last night: #15057