Dark loading indicator page

[quochuy]

I have an app that uses a MenuBar template with items set with reloadOnSelect.
Every time I change view it reloads the content from an API and the loading indicator shows up. Each view has a dark theme but when the loading indicator shows, the background is bright.

Is it possible to set a dark background when the loader shows?

I thought of setting a class to the element and use CSS but it does not work either.

[emadalam]

@quochuy have you may be tried specifying a custom loaderTemplate with theme="dark"?

<!-- loaderTemplate -->
<document>
    <loadingTemplate theme="dark">
        <activityIndicator>
            <title>{{ message }}</title>
        </activityIndicator>
    </loadingTemplate>
</document>

ATV.start({
    templates: {
        loader: loaderTemplate,
        // ... other templates
    },
    // ... menu and other configs
});

References:

• Application initialization using configuration
• TVML Attributes

[quochuy]

Hey @emadalam
I have tried

<document>
	<loadingTemplate theme="dark" class="darkBackgroundColor">
		<activityIndicator>
			<title>{{ message }}</title>
		</activityIndicator>
	</loadingTemplate>
</document>

And it didn't work

[emadalam]

Can you please share your sample code in a repo for me to have a look? There might be some other unrelated issue.

[quochuy]

Hi @emadalam

I've forked your boiler plate and replicated the issue on the "darkbg" branch:
https://github.com/quochuy/appletv-boilerplate/tree/darkbg

All pages have theme="dark" and class="darkBackground".
Move from "Home" to "Movies" to see that the loader remains "light" despite having the same theme and class as other pages.

Regards
Huy