fix: Add condition to wait for sign in togglz

src/app/authorize/components/form-authorize/form-authorize.component.html

@@ -152,6 +152,7 @@
 
   <ng-container *ngIf="signInUpdatesV1Togglz">
     <mat-progress-bar
+      class="progress-bar"
       id="loading-bar"
       *ngIf="
         loadingUserInfo || loadingTrustedIndividuals || loadingAuthorizeEndpoint

src/app/authorize/pages/authorize/authorize.component.html

@@ -18,7 +18,7 @@
         >
           <app-form-authorize
             [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-            *ngIf="showAuthorizationComponent"
+            *ngIf="showAuthorizationComponent && !loading"
           ></app-form-authorize>
           <app-oauth-error
             *ngIf="!showAuthorizationComponent"

src/app/authorize/pages/authorize/authorize.component.ts

@@ -14,13 +14,14 @@ export class AuthorizeComponent implements OnInit {
   platform: PlatformInfo
   showAuthorizationComponent: boolean
   signInUpdatesV1Togglz = false
+  loading = true
 
   constructor(
     _user: UserService,
     private _platformInfo: PlatformInfoService,
     private _togglz: TogglzService
   ) {
-    _user.getUserSession().subscribe((session) => {
+_user.getUserSession().subscribe((session) => {
       if (session.oauthSession && session.oauthSession.error) {
         this.showAuthorizationComponent = false
       } else {
@@ -36,6 +37,9 @@ export class AuthorizeComponent implements OnInit {
     this._togglz
       .getStateOf('SIGN_IN_UPDATES_V1')
       .pipe(take(1))
-      .subscribe((value) => (this.signInUpdatesV1Togglz = value))
+      .subscribe((value) => {
+        this.loading = false;
+        this.signInUpdatesV1Togglz = value
+      })
   }
 }

src/app/cdk/info-drop-down/info-drop-down.component.scss

@@ -1,35 +1,39 @@
-.description-container {
-  padding: 8px;
-  margin-top: 4px;
-  margin-bottom: 8px;
-  max-width: 100%;
-  width: 100%;
-  display: inline-block;
-  overflow: hidden;
-  word-break: break-word;
-  box-sizing: border-box;
-}
-.description-client {
-  margin: 0 !important;
-}
-mat-icon {
-  margin-top: 2px; // Compensates mat icon bottom with space
-  margin-left: 4px;
-  [dir='rtl'] & {
-    margin-right: 4px;
-  }
-
-  text-decoration: none !important;
-}
-
-.university-dropdown {
-  display: flex;
-  font-weight: bold;
-  mat-icon {
-    cursor: pointer;
-  }
-}
-
-:host {
-  display: block;
-}
+.description-container {
+  padding: 8px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+  max-width: 100%;
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  word-break: break-word;
+  box-sizing: border-box;
+}
+.description-client {
+  margin: 0 !important;
+}
+b {
+  word-break: break-all;
+}
+
+mat-icon {
+  margin-top: 2px; // Compensates mat icon bottom with space
+  margin-left: 4px;
+  [dir='rtl'] & {
+    margin-right: 4px;
+  }
+
+  text-decoration: none !important;
+}
+
+.university-dropdown {
+  display: flex;
+  font-weight: bold;
+  mat-icon {
+    cursor: pointer;
+  }
+}
+
+:host {
+  display: block;
+}