From 744f1e082321c837bbf57b5b9ee7a84106986dc6 Mon Sep 17 00:00:00 2001
From: Sahitya Buddharaju <148156994+bsahitya@users.noreply.github.com>
Date: Thu, 5 Sep 2024 20:06:11 -0500
Subject: [PATCH] fix(breadcrumbs): fix rendering issues on load (#2239)

---
 .../src/breadcrumb/breadcrumb.component.scss       |  2 +-
 .../breadcrumbs/src/breadcrumbs.component.ts       | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss b/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss
index 776affe72e..e2754fb89c 100644
--- a/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss
+++ b/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss
@@ -5,7 +5,7 @@
     flex-direction: row;
     align-items: center;
     align-content: center;
-    max-width: 100%;
+    flex-shrink: 0;
     justify-content: flex-end;
 
     ::ng-deep > * {
diff --git a/libs/angular/breadcrumbs/src/breadcrumbs.component.ts b/libs/angular/breadcrumbs/src/breadcrumbs.component.ts
index beb3a322de..eee45e66c9 100644
--- a/libs/angular/breadcrumbs/src/breadcrumbs.component.ts
+++ b/libs/angular/breadcrumbs/src/breadcrumbs.component.ts
@@ -10,6 +10,7 @@ import {
   ElementRef,
   Input,
   HostBinding,
+  AfterViewInit,
 } from '@angular/core';
 
 import { fromEvent, Subject } from 'rxjs';
@@ -24,7 +25,7 @@ import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TdBreadcrumbsComponent
-  implements OnInit, AfterContentInit, OnDestroy
+  implements OnInit, AfterContentInit, AfterViewInit, OnDestroy
 {
   private _resizing = false;
   private _separatorIcon = 'chevron_right';
@@ -69,12 +70,17 @@ export class TdBreadcrumbsComponent
       });
   }
 
+  ngAfterViewInit(): void {
+    this._waitToCalculateVisibility();
+  }
+
   ngAfterContentInit(): void {
     // Note: doesn't need to unsubscribe since `QueryList.changes`
     // gets completed by Angular when the view is destroyed.
     this._breadcrumbs.changes
       .pipe(startWith(this._breadcrumbs))
       .subscribe(() => {
+        this._waitToCalculateVisibility();
         this.setCrumbIcons();
         this._changeDetectorRef.markForCheck();
       });
@@ -156,4 +162,10 @@ export class TdBreadcrumbsComponent
     this.hiddenBreadcrumbs = hiddenCrumbs;
     this._changeDetectorRef.markForCheck();
   }
+
+  private _waitToCalculateVisibility(): void {
+    setTimeout(() => {
+      this._calculateVisibility();
+    });
+  }
 }