Microsoft Teams App - showLoadingIndicator : true resulting in breaking config tab - microsoft-teams

Question

I am trying to use showLoadingIndicator : true in my manifest file and as soon as I load the MicrosoftTeams.js file in my _host.cshtml file I call the javascript to notify success. But this breaks the config Tab. When I search for the item and select the result and click on save it throws error saying tabsettings can not be saved. But if I click on save second time , it works.:
_host.cshtml
<script src="https://res.cdn.office.net/teams-js/2.5.0/js/MicrosoftTeams.min.js"
integrity="sha384-0lOzlvRkoNWAcLkbUTuao6TaDa7zI7v+q2PUAm3lrMxUp43PFwf2kaQu7FYT9fjS"
crossorigin="anonymous"></script>
<script src="~/js/utils.js"></script>
utils.js:
function AppLoaded() {
microsoftTeams.app.initialize().then(() => {
microsoftTeams.app.notifySuccess();
console.log("app loaded");
});
}
AppLoaded();
config.cshtml have:
private async void SetSelectedResult(SearchModel selectedItem)
{
_selectedItem = selectedItem;
if (_selectedItem != null)
{
var settings = new TeamsInstanceSettings
{
SuggestedDisplayName = _selectedItem.Description,
EntityId = _selectedItem.ID.ToString(),
ContentUrl = contenturl",
WebsiteUrl = websiteurl",
RemoveUrl = removeUrl"
};
await MicrosoftTeams.InitializeAsync();
await MicrosoftTeams.RegisterOnSaveHandlerAsync(settings);
}
} ```

Answer 1

You only need to call microsoftTeams.app.notifySuccess(); in the -actual- tab, not in the config panel. Add a switch in your code somehow (based on page name, or a setting, or however you decide to do it) to only call that from in the main tab.
Update: You are also missing the call to notifyAppLoaded, which is even more important that notifySuccess. See in this document, that you actually need to call notifyAppLoaded to 'hide loading indicator'.