[Exploratory view] Only show metric loading for relevant series

[shahzad31]

Summary

Fixes: #117275

Will only show loading for relevant series when index pattern is loading

If index pattenr is already loaded, it won't show the loading

Added relevant unit tests to reflect the change.

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 47107e0
• Storybooks Preview

Test Failures

• [job] [logs] Default Firefox Tests / Spaces app Enter Space allows user to navigate to different spaces, respecting the configured default route

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observability	379.1KB	379.1KB	-4.0B

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

cc @shahzad31

[lucasfcosta]

Thank you for the PR @shahzad31!

I've tested it as I've done before, and it looks good to me. As you can see in the GIF below, as I load new metrics the old ones don't show as loading too.

I've only left non-blocking comments. I'll leave it up to you if you think they're worth addressing.

[lucasfcosta]

I understand this will work because if we get here and decide not to display the EuiLoadingSpinner that's because we've already done the loading for this particular pattern.

As I was reading code, however, I had to mentally attempt quite a few combinations of state to try to think of edge cases.

As a note for a further improvement (which we don't have to incorporate in this PR unless you want/have time to), I can make the following suggestion:

1. Pass series.dataType to the hook invocation on L38
2. Change the value of loading that's passed to IndexPatternContext.Provider so that it embeds the whole map informing which metrics are loading not only if we're loading any metrics
3. In the component itself, access the loading state for a particular series.dataType.

Such a change would allow us to determine whether a particular metric is loading, not only whether any metrics are loading at all.

IMO I think it would also be clearer to the reader that we display the loading because a particular metric is loading, not because of a combination of previous states (and early returns).

[lucasfcosta]

Just to make the test a bit more robust, it may be worth adding other indexPatterns to the dictionary object here so that your test could prove that the component checks for that index pattern in particular:

i.e.

    mockAppIndexPattern({ loading: true, indexPatterns: { "other-index-pattern": true } });

This is also minor and non-blocking.

[kibanamachine]

The following labels were identified as gaps in your version labels and will be added automatically:

• v8.1.0

If any of these should not be on your pull request, please manually remove them.

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	8.0
✅	7.16

The backport PRs will be merged automatically after passing CI.