Show pulsing dots while home page hero image is loading

@@ -31,6 +31,15 @@ const Loader = () => {              />            );          })}        <div          className={styles.indicator}          data-ready={ready ? "true" : "false"}          aria-hidden="true"        >          <span className={styles.dot} />          <span className={styles.dot} />          <span className={styles.dot} />        </div>      </div>    </>  );

@@ -7,6 +7,19 @@  }}@keyframes dotPulse {  0%,  80%,  100% {    opacity: 0.2;    transform: scale(0.8);  }  40% {    opacity: 1;    transform: scale(1);  }}.grid {  display: grid;  grid-template-columns: 60px 15% 1fr 1fr 15% 60px;

@@ -18,6 +31,40 @@  pointer-events: none;}.indicator {  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  display: flex;  gap: 8px;  opacity: 0;  transition: opacity 400ms ease-in-out;  z-index: 10000;  pointer-events: none;}.indicator[data-ready="false"] {  opacity: 1;  transition-delay: 250ms;}.dot {  width: 8px;  height: 8px;  border-radius: 50%;  background-color: white;  animation: dotPulse 1400ms ease-in-out infinite both;}.dot:nth-child(2) {  animation-delay: 160ms;}.dot:nth-child(3) {  animation-delay: 320ms;}.gridColumn::before,.gridColumn::after {  content: "";