Implement "completed" guide animation

[claracruz]

Fixes #147387

Screenshots

[elasticmachine]

Pinging @elastic/platform-onboarding (Team:Journey/Onboarding)

[yuliacech]

@cindychangy Do we have a dark theme support for the "completed guide" GIF?

[yuliacech]

Thanks a lot for working on this, @claracruz!
I tested locally and saw that the gif is displayed from the very beginning of the guide. We should only display the animation when the guide is in the status ready_to_complete and complete. Also, is there is specific reason to use EuiEmptyPrompt for the gif? Can we maybe use a simple EuiImage instead?

[cindychangy]

@cindychangy Do we have a dark theme support for the "completed guide" GIF?

@yuliacech: we actually did not get one from the Branding team - I just contact them for a dark mode version. I will let you know when I receive it - should we add it in an additional task so as not to block this one?

[cindychangy]

@claracruz @yuliacech: I got the dark mode version for this animation, it is attached below:

[yuliacech]

Thanks a lot, @cindychangy!
@claracruz Could you please add the dark theme gif to the code? here is the link to the file (link).

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: aeeb5c9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
guidedOnboarding	21	23	+2

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
guidedOnboarding	23.1KB	23.7KB	+585.0B

Unknown metric groups

miscellaneous assets size

id	before	after	diff
guidedOnboarding	1.9MB	3.3MB	⚠️ +1.4MB

History

• 💚 Build #103384 succeeded 1de94c134d1954033b03581c3a2e48a697c67465
• 💚 Build #102669 succeeded 4e8a64133d0ea09d3b421906f3d874dd796cfb78

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[yuliacech]

Thanks a lot for working on this, @claracruz! Looks great 👍