Loading Indicator using `CPListTemplate` (CarPlay Audio App)

Hello,

I am using CPListTemplate to display a list of radio streams. To be able to get the Items to be displayed in the list, I have to first make a network request.

I would like to show a loading spinner while the request is in progress.

Hows does one display a loading indicator in CPListTemplate?

I have watched the 2020 "Accelerate your app with CarPlay" session. Here it shows how to show a Loading spinner but only as a response on a tap on an item. So this doesn't work for me.

I have also found this post: https://developer.apple.com/forums/thread/662539 but the answer there is incomplete and it seems that it might not apply to Audio apps (?)

There's nothing on the documentation that might suggest how to accomplish this. Is it even possible? it seems like a pretty common use case.

Accepted Reply

Hi, you're correct that a traditional spinner is currently available only in response to a CPListItem tap. Some other options could be:

  • Several apps use -[CPListTemplate emptyViewTitleVariants] and emptyViewSubtitleVariants to convey a loading state on the list template. The empty view title and subtitle will automatically be removed once the list template is populated with at least one list item.
  • You could present a modal template, like CPAlertTemplate or CPVoiceControlTemplate, as an overlay on top of your app's root template. The voice control template in particular can show an animated image, which could be used for a spinner-like animation.
  • Some apps populate a list template with a "loading" list item to communicate a loading state.

Replies

Hi, you're correct that a traditional spinner is currently available only in response to a CPListItem tap. Some other options could be:

  • Several apps use -[CPListTemplate emptyViewTitleVariants] and emptyViewSubtitleVariants to convey a loading state on the list template. The empty view title and subtitle will automatically be removed once the list template is populated with at least one list item.
  • You could present a modal template, like CPAlertTemplate or CPVoiceControlTemplate, as an overlay on top of your app's root template. The voice control template in particular can show an animated image, which could be used for a spinner-like animation.
  • Some apps populate a list template with a "loading" list item to communicate a loading state.