Reserving space for "phantom text" in a Button

[madsmh]

I have the following conditional rendering of a button in my component:

 let button = if !is_logging_in_signal() {
        rsx! {
            Button {
                style: "vertical-align: middle;",
                onclick: move |_| async move {
                    is_logging_in_signal.set(true);
                    match login(username(), password()).await {
                        Ok(_) => {
                            response.set("Log ind lykkedes".to_string());
                            navigator().replace(Route::Home {});
                        }

                        Err(_) => {
                            response.set("Forkert brugernavn eller password".to_string());
                        }
                    };
                    is_logging_in_signal.set(false);
                },
                LogIn {
                    size: 24,
                    style: "vertical-align: middle; margin-right: 10px",
                }
                "Log ind"
            }
        }
    } else {
        rsx! {
            Button {
                style: "vertical-align: middle;",
                disabled: true,
                SpinnerIcon {}
                "Logger ind"
            }
        }
    };

I would like both buttons to have the same size, that is they must both be wide enough to accommodate the larger of the two labels. Is there a way to set "phantom text" in the first button to accommodate the label "Logger ind" without showing the text?

[meyshad]

You can keep one button mounted and let CSS measure both labels in the same grid cell. The hidden label still participates in layout, so the cell takes the width of the longer string without adding both widths together.

let logging_in = is_logging_in_signal();

rsx! {
    Button {
        class: "login-button",
        disabled: logging_in,
        onclick: move |_| async move {
            // existing login code
        },

        span { class: "login-button__icon",
            if logging_in {
                SpinnerIcon {}
            } else {
                LogIn { size: 24 }
            }
        }

        span { class: "login-button__label",
            span {
                class: "login-button__measure",
                aria_hidden: "true",
                "Logger ind"
            }
            span { class: "login-button__visible",
                if logging_in { "Logger ind" } else { "Log ind" }
            }
        }
    }
}

.login-button {
  display: inline-grid;
  grid-template-columns: 24px auto;
  align-items: center;
  column-gap: 10px;
}

.login-button__icon {
  width: 24px;
  display: grid;
  place-items: center;
}

.login-button__label {
  display: grid;
}

.login-button__measure,
.login-button__visible {
  grid-area: 1 / 1;
}

.login-button__measure {
  visibility: hidden;
}

The fixed icon column also prevents a spinner and the login icon from changing the total width. Keeping a single Button avoids replacing the DOM node when the signal changes; only its disabled state, icon, and visible label are updated.

[madsmh]

Thank you!