Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange flash on initial load #227

Closed
RefineryX opened this issue Oct 11, 2022 · 1 comment
Closed

Strange flash on initial load #227

RefineryX opened this issue Oct 11, 2022 · 1 comment

Comments

@RefineryX
Copy link

RefineryX commented Oct 11, 2022

I’m currently building out my dashboard and when using ‘card-mod’ it does an annoying refresh / flash on the initial load of each page.

Is there anything I can do to stop this?

Demonstration:

ezgif-1-b0d97a1b8e

Slowed Down

ezgif-3-770374844a

In my config.yaml file I also put the following to see if it would prioritise the load but it has not worked.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

Code used in demo:

type: custom:mod-card
style: |
  ha-card {
    padding: 0px 30px 0px 30px!important;
  }
card:
  type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:mod-card
          card:
            type: custom:mushroom-title-card
            title: Entertainment
          card_mod:
            style:
              mushroom-title-card$: |
                .header {
                  --title-padding: 23px 0px 40px;
                  letter-spacing: -0.12vw!important;
                }
                .title {
                  font-size: 35px!important;
                  font-weight: 520!important;
        - type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: sensor.bathroom_temperature
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
          alignment: end
          style: |
            .chip-container {
                padding-top: 0px;
                padding-right: 0px;
              }
            :host {
                --chip-background: none!important;
    - type: horizontal-stack
      cards:
        - type: custom:mushroom-light-card
          entity: light.bedside_lamps
@peterwroot
Copy link

peterwroot commented Nov 23, 2022

I'm seeing this behavior as well, it looks to me like the custom CSS is being applied after the dashboard is loaded.

I have a few cards where I'm removing the background, changing the font size, or changing padding and they all animate the change between their default state and the changes made by card-mod. This seems to only happen on initial page load, after which it won't happen again until the page is refreshed, or some kind of cache expires.

Animation

The above gif was recorded using firefox, but I'm seeing the same behavior in the Fully Kiosk Browser app too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants