Spinner improvements

[grumpyinca]

The current spinner may be extended and improved.

It has been observed that when using the staging system, "waking up" a sleeping Heroku dyno will sometimes show the alt-text "Running ..." as opposed to the animated graphic. It is speculated that this happens when the browser does not have a cached copy of the spinner graphic. It may be possible to resolve this rather cosmetic problem by pre-loading the graphic at the time that the ODOP app is first loaded by the browser.

Currently, the spinner is invoked only by potentially long-running interactions with the database. It would be nice to have the spinner triggered by long-running computations of Search, Seek and Trade. However, some of those operations can be sub-second. In those cases, the brief appearance of the spinner would be distracting. Hopefully, a reasonable compromise can be found. Perhaps a time-out can be established to put up the spinner if the operation has not finished in a specific amount of time (500 or 1000 ms perhaps?). Perhaps the Pattern Search code can be modified to put up the spinner only after the first few pattern moves.

There may be cases where the exec, demo and tutor scripts would want to control the spinner. In those cases, the duration of various computations will be known in advance.

[grumpyinca]

React forceUpdate

[grumpyinca]

Background on Shoelace library of web components

Shoelace spinner

[grumpyinca]

Progress has been made. The Javascript throw ... finally made the difference. Testing in progress.

[grumpyinca]

Testing of File : Import seems to show inconsistent behavior of spinner.

To replicate the problem, start with two exported files named "a" and "b". I did my testing with metric extension spring design type.

1. File : Open Startup (observe spinner)
2. File : Import a (observe no spinner)
3. File : Open Startup (observe spinner)
4. File : Import a (don't reselect; open "remembered" file name; observe spinner)
5. File : Open Startup (observe spinner)
6. File : Import b (observe no spinner)
7. File : Open Startup (observe spinner)
8. File : Import b (don't reselect; open "remembered" file name; observe spinner)

[1fifoto]

Made some changes to branch 616 and merged them into master, please re-try the problem above.

[grumpyinca]

Tested in development environment. The reported issue seems resolved. Step 2 got a "Running ..."; Step 6 got a correct spinner animation.

As noted in the reference to step 2 in the preceding sentence, a variation of the assumed failure to get the .gif animation loaded / cached was observed. Specifically, after correctly showing the spinner in step 1, step 2 showed "Running..." without the animation. Step 6 correctly showed the spinner with animation. The behavior repeated after NPM client shutdown & re-load. If this behavior is driven by the need to pre-load the .gif animation, I don't really understand why the animation would succeed in step 1 but fail in step 2.

[1fifoto]

I have replaced the <img src="ODOP Spinner file"> with an <img src="embedded ODOP Spinner base64 string"> which now always works.

[1fifoto]

Merged into master, closing