NIFI-12225 Improve NiFi splash loading animation

[nandorsoma]

Summary

NIFI-12225

With NiFi 2.0 just around the corner, I thought it's a great opportunity to differentiate it from from the 1.x line by introducing a fresh splash screen.
The PR includes both a GIF and a JSON version. The JSON format would be the preferred choice, but it requires an additional frontend dependency to render. Personally, I don't believe that having just a single animation from that source justifies adding the extra dependency. I'm including it in the PR primarily as an option for potential future use.

To see it in action, I recommend setting a breakpoint at:

nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/api/FlowResource.java

Line 1229 in ae61ebb

authorizeFlow();

Screenshot taken from a running NiFi:

Screen.Recording.2023-10-13.at.12.48.02.mov

Tracking

Please complete the following tracking steps prior to pull request creation.

Issue Tracking

• Apache NiFi Jira issue created

Pull Request Tracking

• Pull Request title starts with Apache NiFi Jira issue number, such as NIFI-00000
• Pull Request commit message starts with Apache NiFi Jira issue number, as such NIFI-00000

Pull Request Formatting

• Pull Request based on current revision of the main branch
• Pull Request refers to a feature branch with one commit containing changes

Verification

Please indicate the verification steps performed prior to pull request creation.

Build

• Build completed using mvn clean install -P contrib-check
  • JDK 21

Licensing

• New dependencies are compatible with the Apache License 2.0 according to the License Policy
• New dependencies are documented in applicable LICENSE and NOTICE files

Documentation

• Documentation formatting appears as expected in rendered files

[exceptionfactory]

Thanks for proposing this new animation option @nandorsoma! It is a clean new look, and the animated GIF approach seems reasonable as opposed to the JSON version. The only minor downside is the size of the GIF (300 KB).

For background, what is the library required to read the JSON file?

I am in favor of this change. What do you think @mcgilman, @pvillard31, @joewitt?

[joewitt]

the actual look of it - super cool. Nice touch!

implementation - i defer to others

thanks!

[nandorsoma]

Thanks for proposing this new animation option @nandorsoma! It is a clean new look, and the animated GIF approach seems reasonable as opposed to the JSON version. The only minor downside is the size of the GIF (300 KB).

For background, what is the library required to read the JSON file?

I am in favor of this change. What do you think @mcgilman, @pvillard31, @joewitt?

Thanks for the review @exceptionfactory!

In our scenario, I think we need this package: https://www.npmjs.com/package/ngx-lottie

If you want to delve deeper, there's more information on the format available here: https://lottiefiles.com/

Regrettably, this guide won't work for our needs, however, it can be helpful for testing the JSON file I've attached: https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page-html

[exceptionfactory]

Thanks for the background @nandorsoma!

[exceptionfactory]

@nandorsoma On further consideration, 300 KB seems too large for an initial loading image, given that the point of the loading screen is to render quickly before the rest of the content is ready.

I looked at optimizing the animated GIF, which consists of 90 frames, and I was able to shrink it down to about 40 KB with 11 frames. It is not quite as smooth, but it is one possible approach.

Thoughts?

[nandorsoma]

@nandorsoma On further consideration, 300 KB seems too large for an initial loading image, given that the point of the loading screen is to render quickly before the rest of the content is ready.

I looked at optimizing the animated GIF, which consists of 90 frames, and I was able to shrink it down to about 40 KB with 11 frames. It is not quite as smooth, but it is one possible approach.

Thoughts?

Thanks for the feedback, @exceptionfactory. To be honest, I had some concerns about the initial 300kB as well. When I tested it on my machine with a blank canvas, the splash screen only appeared for a fraction of a second. It doesn't seem like the loading time is significantly affected by the animation's size in that scenario, although I do recognize this is an edge case. In a more typical scenario with a complex canvas and a longer loading time for NiFi, that 300kB animation download shouldn't be the bottleneck. In that situation, having a smoother animation also appears to be more beneficial.

[exceptionfactory]

Thanks for the feedback, @exceptionfactory. To be honest, I had some concerns about the initial 300kB as well. When I tested it on my machine with a blank canvas, the splash screen only appeared for a fraction of a second. It doesn't seem like the loading time is significantly affected by the animation's size in that scenario, although I do recognize this is an edge case. In a more typical scenario with a complex canvas and a longer loading time for NiFi, that 300kB animation download shouldn't be the bottleneck. In that situation, having a smoother animation also appears to be more beneficial.

Thanks for the reply @nandorsoma. It is important to note that testing on a local machine is an ideal scenario, where traffic does not have to go over a network connection to reach the browser. In standard deployments, there will be some amount of network latency. The latency could vary considerably based on a variety of factors. For those reasons, having a small size for an initial loading screen is more critical. Although it would be great to have a new look, I lean in the direction of thinking that 300 KB is too large. An SVG version would be optimal.

[exceptionfactory]

Thanks again for proposing this improvement @nandorsoma. The concept is great, but without a vector-based approach, it does not seem suitable for an initial loading animation. I am closing this pull request for now, but feel free to re-open if you come up with alternatives.