SharePoint List Custom View Displayed Abnormally

I created a board view for SharePoint list and customized the card by using JSON file. This view displayed abnormally, so I want to know what is the problem. Here are the details.

Some elements couldn't displayed when I went to the list for the first time, or refreshed the page. However, if I switched the view to "All Items" (or other view) and switched back to my custom view, it would display correctly. Please check the lightbulb element in the two images below. Left is after page refreshing and right is after view switching.

My JSON code can be found below. I used SharePoint online and Chrome/Edge. When I opened the browser console to check page elements, it seemed the corresponding html code of lightbulb element just disappeared.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container sp-card-container-noPadding"
    },
    "style": {
      "margin": "auto",
      "width": "256px",
      "height": "361px",
      "border-radius": "10px",
      "background-color": "blue"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {},
        "style": {
          "margin": "auto",
          "width": "250px",
          "height": "275px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "draggable": "false",
              "src": "=getThumbnailImage([$Photo], 400, 400)",
              "title": "[$Name.title]"
            },
            "style": {
              "display": "block",
              "margin": "auto",
              "margin-top": "0px",
              "width": "180px",
              "height": "180px",
              "border": "5px solid white",
              "border-radius": "95px",
              "object-fit": "cover"
            }
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-highlightedContent",
                  "title": "[$Name.title]",
                  "role": "heading",
                  "aria-level": "1"
                },
                "style": {
                  "height": "30px",
                  "margin-top": "20px",
                  "font-size": "1.5em",
                  "text-align": "center",
                  "color": "white"
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Name]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Name]",
                    "elmType": "p",
                    "defaultHoverField": "[$personIterator]",
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
                    },
                    "txtContent": "[$personIterator.title]"
                  },
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Name]) > 1, ',  +' + (length([$Name]) - 1) , '')"
                  }
                ]
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          },
          {
            "elmType": "div",
            "style": {
              "visibility": "=if([$Number]<1, 'hidden', 'visible')",
              "color": "white",
              "font-size": "1em",
              "text-align": "center",
              "margin": "auto",
              "margin-top": "10px",
              "width": "180px"
            },
            "children": [
              {
                "forEach": "iterator in split(padStart('',[$Number]-1,'^'),'^')",
                "elmType": "img",
                "attributes": {
                  "src": "=@currentWeb + '/SiteAssets/lightbulb.png'"
                },
                "style": {
                  "display": "=if(loopIndex('iterator') >= 8, 'none', '')",
                  "margin": "0px",
                  "width": "18px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "=if([$Number] > 8, ' +' + ([$Number]-8), ''",
                "style": {
                  "display": "inline",
                  "vertical-align": "top"
                }
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          },
          {
            "elmType": "img",
            "attributes": {
              "src": "=@currentWeb + '/SiteAssets/logo.png'"
            },
            "style": {
              "margin-left": "10px",
              "margin-top": "15px",
              "width": "100px"
            }
          }
        ]
      }
    ]
  }
}