[I] The sidebar-collapse and theme-toggle buttons in the header render as blank space on every page load [fineract-backoffice-ui]

["Aman-Mittal (via GitHub)" <gi...@apache.org>]

Aman-Mittal opened a new issue, #263:
URL: https://github.com/apache/fineract-backoffice-ui/issues/263

   ## Summary
   
   Two buttons in the top header have no icon when the app loads. Both are still clickable — they are just invisible, so the button reads as an empty gap:
   
   - the sidebar collapse/expand button, at the far left of the header
   - the light/dark theme toggle, in the cluster on the right
   
   Every other icon on the page renders. On a dashboard load I counted 133 icons drawn correctly and exactly these 2 blank.
   
   The icons come back as soon as you click the button once. So the buttons look broken until you happen to press one, and then they look fine for the rest of the session — which is why this is easy to miss.
   
   ## Where
   
   `src/app/layout/header.component.ts`
   
   ```html
   <!-- line 62 -->
   <ion-icon
     [name]="sidebarService.isCollapsed() ? 'menu-outline' : 'chevron-back-outline'"
   ></ion-icon>
   
   <!-- line 124 -->
   <ion-icon
     [name]="themeService.isDarkMode() ? 'sunny-outline' : 'moon-outline'"
   ></ion-icon>
   ```
   
   ## Cause
   
   `ion-icon` reads its `name` when the element is connected to the page. Angular applies a **binding** during the first change-detection pass, which runs *after* the element has been inserted — so `ion-icon` connects with no name, finds nothing to draw, and does not pick the name up when it arrives a moment later. A **static** `name="..."` is set before insertion, which is why every other icon in the same header is fine.
   
   Changing the value later does re-trigger it, which is what the click is doing.
   
   This is not a registration problem: all four names are present in `src/app/core/icons.ts`, `npm run check:icons` passes, and creating `<ion-icon name="sunny-outline">` by hand at runtime draws it correctly.
   
   ## Fix
   
   Render two `ion-icon` elements with **static** names behind `@if`, instead of one element with a bound name:
   
   ```html
   @if (sidebarService.isCollapsed()) {
     <ion-icon name="menu-outline"></ion-icon>
   } @else {
     <ion-icon name="chevron-back-outline"></ion-icon>
   }
   ```
   
   **Verified**: with that change applied to the collapse button and the theme toggle left alone as a control, the collapse icon draws on first load and the theme toggle is still blank — same page, same load. Then apply the same shape to the theme toggle.
   
   Please do not "fix" this by switching to `[attr.name]`. That was tried and it does **not** work; the timing is identical.
   
   ## Not in scope
   
   Six other `[name]` bindings exist (`sidebar.component.ts`, `staff-list`, `client-addresses-list`, `notifications-config`, `data-table` sort arrow). They all render correctly today, because their elements are created after the first paint, by which point `ion-icon` behaves normally. Leave them alone — this issue is only about the two in the header.
   
   ## How to check your work
   
   1. `npm start`, sign in, and look at the far left and far right of the header **without clicking anything**. Both icons should be visible.
   2. Click each button; the icon should swap and stay visible.
   3. `npm run check:icons` and `npm test` still pass.
   
   ## Business Value
   
   The header is on every screen, so this is the first thing anyone sees. Two of the app's global controls — collapsing the navigation and switching to dark mode — are invisible until discovered by accident, which for most users means never. Anyone working on a small screen, where collapsing the sidebar is the difference between a usable table and a cramped one, simply does not know the control is there.
   
   It also costs nothing to keep: the buttons already work, and the fix is a template change with no logic behind it.
   
   ## Good first issue
   
   Self-contained, one file, no API or state involved, and the result is visible on screen without running anything but the app.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@fineract.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [I] The sidebar-collapse and theme-toggle buttons in the header render as blank space on every page load [fineract-backoffice-ui]

["Aman-Mittal (via GitHub)" <gi...@apache.org>]

Aman-Mittal closed issue #263: The sidebar-collapse and theme-toggle buttons in the header render as blank space on every page load
URL: https://github.com/apache/fineract-backoffice-ui/issues/263


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@fineract.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org