Hotwire + Tailwind: 자바스크립트가 없는 스피너

이 문서에서는 추가 Javascript 없이 터보 프레임을 로드하는 동안 스피너를 표시하는 방법에 대해 설명합니다.

면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다.

아이디어 및 설정

설정은 매우 간단합니다. 내부에 스피너가 있는 터보 프레임일 뿐입니다.

그러나 프레임이 로드될 때 <turbo-frame id="loadable" busy="" aria-busy="true">와 같이 표시됩니다. 여기에는 [busy] 속성이 첨부되어 있습니다.

알고 보니 해당 속성[busy]을 활용할 수 있습니다. 💆

순풍 수정자 추가

이것은 대부분의 🪄🎩 마법 🎩🪄이 일어나는 곳입니다. Tailwind를 사용하면 이 경우에 정확히 필요한 맞춤 수정자를 설정할 수 있습니다.

// tailwind.config.js

let plugin = require("tailwindcss/plugin")
module.exports = {
  // ...
  plugins: [
    plugin(({ addVariant }) => {
      addVariant("busy", "&[busy]")
      addVariant('group-busy', ':merge(.group)[busy] &')
    })
  ]
}

여기서는 busy 속성에 바인딩되는 [busy] 수정자가 설정됩니다. 또한 group-busy가 추가되어 상위 터보 프레임 내부의 스피너를 대상으로 합니다.

마무리

이제 우리는 일부 요소에 일부 클래스를 ✨뿌릴 수 있습니다.

<turbo-frame id="loadable" class="group">
  <svg
    class="group-busy:inline hidden h-6 w-6 animate-spin"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</turbo-frame>

이 경우 터보 프레임이 로드되는 동안 스피너가 나타납니다. 이제 프레임 요소에는 group 클래스가 있고 스피너에는 이제 group-busy:inline hidden 클래스가 있습니다.

이제 해당 수정자를 사용할 때 원하는 대로 스타일을 지정할 수 있습니다. 예를 들어 busy:opacity-50는 로드하는 동안 터보 프레임을 투명하게 만듭니다.

마무리

주요 목표는 코드베이스에서 불필요한 Javascript를 다시 한번 제거하는 것이었습니다. 이것은 Hotwire의 단순성과 Tailwind의 유연성을 유지하면서 그렇게 하는 다소 깔끔한 방법으로 판명되었습니다.


질문이나 제안 사항이 있으면 언제든지 저에게 연락하거나 제 website를 방문하십시오!