feature/loader

[joshua-dean]

Loader

Closes #25.

Description

• Added overlay with spinning loading icon
  • Added during init and removed once loading is complete
• Pulled a lot of init logic into it's own file
• Added a staggered_ulabel_init which displays the screen earlier and adds a configurable delay between each step. This is intended to help visualize/debug the loading process, and demonstrate features like the loader
  • This branch uses the "staggered" init with a 250ms delay per step. This is currently hard-coded but we could make this a feature flag or configurable.
• Added build-dev-and-demo npm script
• Added a bunch of missing init functions to ULabel's type declaration

The "staggered" init is async to allow the delays to run. The ULabel.load_image_promise wasn't playing nicely with async, so I opted to use .decode() instead (why wasn't this done in the first place?).

I resisted the urge to completely rearrange and init process in this PR, but now there is a place to do so if we want to optimize in the future.

The production build for this is way slower than previously, which I suspect is due to the static function calls (index.js and initializer.ts both call each other so there's some resolution that webpack has to handle). I'm going to leave this as a draft until I can solve this, or we decide that we don't care.
Production build size issues solved by #200 and #201.

PR Checklist

• Merged latest main target branch
• Version number in package.json has been bumped since last release
• Version numbers match between package package.json and src/version.js
• Ran npm install and npm run build AFTER bumping the version number
• Updated documentation if necessary (currently just in api_spec.md)
• Added changes to changelog.md

Breaking API Changes

maybe

[joshua-dean]

Yeah so the really long builds is a result of webpack increasing the size of dist/ every build, because initializer.ts calls static ULabel functions in index.js, so it's a somewhat circular dependency. It's possible there's a setting to make webpack not do this.

To avoid this, we would need to pull has_night_mode_cookie, initialize_annotation_canvases, load_image_promise, create_listeners (massive), after_init, and elvl_fatal to not be in index.js.

Static class functions that take an instance of the class seem problematic in our use case anyways, so hoisting these elsewhere is probably in our best interests. I might punt on this specific feature and do some PRs on the other ones (like create_listeners) separately.

[joshua-dean]

I might punt on this specific feature and do some PRs on the other ones (like create_listeners) separately.

The necessary changes to avoid the issue are in #200 and #201. I have merged the latest of #201 into this branch and made it the base for this PR. I have tested this and am able to build repeatedly without dist/ ballooning in size.

[joshua-dean]

#200 and #201 are approved, so I merged the latest and am marking this as "ready for review".

[TrevorBurgoyne]

loader is very cool, and i like the general init refactor

[joshua-dean]

@TrevorBurgoyne I consolidated to a single init (the async one) without any delays, and merged the latest main through the whole chain.

#200 and #201 are approved, so if this is approved I'll merge them all into #202 so we can release them all together.

[TrevorBurgoyne]

LGTM 👍