Issue of updating labels dynamically

[TomislavMedved]

I have a classic situation where i have List of items on one route/page. When i click on a single item within a list, i am redirected to details page/route of that item. There i update label dynamically to show name of the item.

My issue is that each time you navigate from item list to item details you have 0.5 sec (some amount of time before you get data from backend) preview of the recent item name untill i set the new one. This happens every time except the first time (because we didnt dynamically update anything yet). I update label dynamically by alias.

Is there any way to avoid showing recent label which was dynamically updated?

I have solved it by skipping that path also and then when upading via alias setting skip to false, but i feel that that is more like a hack then a proper solution.

[github-actions[bot]]

Hello 👋 @TomislavMedved
Thank you for raising an issue. We will investigate into the issue and get back to you as soon as possible. Please make sure you have given us as much context as possible.
Feel free to raise a PR if you can fix the issue. Check the local development guide

[udayvunnam]

Hey @TomislavMedved, this is a nice feature to have to improve the UX of the app.

This is achievable. I will work on the API to achieve such behaviour.

what would you expect in case item details service fails to provide a label on error.

[udayvunnam]

@TomislavMedved you can do this with existing breadcrumb APIs

// skip item details breadcrumb in routing module declaration
  {
    path: 'itemDetailsPath',
    component: ItemDetailsComponent,
    data: { breadcrumb: { skip: true, alias: 'itemDeatils' } }
  }
  
  // set breadcrumbs just after getting data from the component
  
   this.breadcrumbService.set('@itemDeatils', {skip: true});
   this.itemService.getItemDetails(itemId).subscribe((response) => {
      this.item = response;
      this.breadcrumbService.set('@itemDeatils', {label: this.item.name, skip: false});
   });

[TomislavMedved]

Yeah, but there's another issue with that approach, if you have a parent route which contains multiple children routes, and i update parent route with lets say List Name via alias and skip false, it will be shown initially on the first child route, but if i switch to another child route, list name that was updated dynamically is hidden again, it didn't remember newly skip false value but took initial skip true from the initial config from route.ts

Example: { path: ':cid/show', component: BoxDetailsComponent, data: { breadcrumb: { skip: true, alias: 'boxName' } }, children: [ { path: 'items', component: BoxItemsComponent, }, { path: 'dimensions', component: BoxDimensionsComponent }, { path: 'properties', component: BoxPropertiesComponent }, }

Here in the example where we are directed to :cid/show/items initially. Parent :cid/show has breacrumbs skip true with boxName alias. Skip is true so we avoid issue of seeing old boxName for a breif second untill we get data for new box from the BE. When data is fetched from BE i update breadcrumbs with this.breadcrumbService.set('@boxName', { label: boxBackend.name, skip: false }); Box name is shown, but when we go to :cid/show/dimensions box name is lost from breadcrumbs. I guess API doesnt hold the newly updated values over breadcrumbs service. It would be good if there could be a setting weather to remember new updated states.

If we dont use skip and use it normaly, it works, but then we have an issue of seeing old boxName for a time while new one is fetched. It would work if i update each children route specificly and not the parent, and update dynamically from each children's route boxName, but thats not good, its repetative and duplicated code.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[udayvunnam]

not stale

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jamesrusso]

I am trying to find a solution for the same issue. On the initial page load is has the of the object for me and then I set the alias and it'll flicker. I'd rather the entire item not show up until the aliases are set

[jamesrusso]

My solution was to simply not show the breadcrumbs during navigation. In the component containing the breadcrumbs I simply added the following:

 <xng-breadcrumb [separator]="separator" *ngIf="breadcrumbVisible$ | async">
        <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first; let last = last">
          <ng-container>{{ breadcrumb }}</ng-container>
        </ng-container>
      </xng-breadcrumb>      

    this.router.events.pipe(filter((event) => event instanceof NavigationStart || event instanceof NavigationEnd)).subscribe((event) => {
      this.breadcrumbVisible$.emit(event instanceof NavigationStart ? false : true);
    })

So, now the breadcrumbs won't be displayed until after the navigation has ended and it seems to no longer display the wrong name briefly.