jSimple

import $ from "@jsimple/core";

const btn = $.select("#btn");
const card = $.select("#card");
const svg = $.select("#svg");

const [isOpen, setIsOpen] = $.signal(false);
const [isLoading, setIsLoading] = $.signal(false);

$.effect(() => {
  card.style.display = isOpen() ? "block" : "none";
  svg.classList.toggle("hidden", !isLoading());
});

btn.onClick(() => {
  setIsLoading(true);
  setTimeout(() => {
    setIsOpen(!isOpen());
    setIsLoading(false);
  }, 1000);
});

<div class="wrapper">
  <button id="btn" class="btn" type="button">
    open card
    <img id="svg" src="./spinner.svg" class="spinner" width=24 height=24 alt='spinner'/>
  </button>
  <div id="card" class="card">
    <img src="https://images.unsplash.com/photo-1667509183423-3dc91386c055?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
    <div class="text">
      <p class="title">Title</p>
      Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan.
    </div>
  </div>
</div>

import $ from "@jsimple/core";
import { run } from "@jsimple/dom-render";

function CardComponent() {
  const [isOpen, setIsOpen] = $.signal(false);
  const [isLoading, setIsLoading] = $.signal(false);
  const [buttonBg, setButtonBg] = $.signal("bg-red-500");

  const toggleCard = () => {
    setIsLoading(true);
    setButtonBg("bg-green-500");
    setTimeout(() => {
      setIsOpen(!isOpen());
      setIsLoading(false);
      setButtonBg("bg-red-500");
    }, 1000);
  };

  return {
    isOpen,
    setIsOpen,
    isLoading,
    setIsLoading,
    toggleCard,
    buttonBg,
    setButtonBg
  };
}

run([CardComponent]);

<div data-define="card-component" class="wrapper">
  <button $click="toggleCard()" :class="btn {buttonBg()}" type="button">
    open card
    <img src="./spinner.svg" $display="isLoading()" class="spinner" width=24 height=24 alt='spinner'/>
  </button>
  <div $display="isOpen()" class="card">
    <img src="https://images.unsplash.com/photo-1667693790254-cf2fda33c8bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80">
    <div class="text">
      <p class="title">Title</p>
      Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan.
    </div>
  </div>
</div>

import { GET, load } from "@jsimple/fetcher";
import { run } from "@jsimple/dom-render";

const getTodos = GET("https://jsonplaceholder.typicode.com/comments/1");

function ComponentWithData() {
  const { data, isLoading } = load(getTodos, ["keyString"]);
  return {
    data,
    isLoading,
  };
}
  
run([ComponentWithData]);

<div data-define="component-with-data" class="component">
  <img src="./spinner.svg" $display="isLoading()" class="spinner" width=24 height=24 alt='spinner'/>
  <div $display="!isLoading()" class="card">
    <img src="https://images.unsplash.com/photo-1652381791214-dbe3ee8bbb28?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
    <div class="text">
      <p class="font-bold uppercase text-14 text-slate-900">{data()?.name}</p>
      <span>{data()?.body}</span>
    </div>
  </div>
</div>

import { define, s, callback } from "@jsimple/custom-element";

@define("fancy-toggle")
export class FancyToggle extends HTMLElement {
  @s(false) isOpenSignal: TSignal;
  @s(false) isLoadingSignal: TSignal;
  isOpen: typeof this.isOpenSignal[0];
  setIsOpen: typeof this.isOpenSignal[1];
  isLoading: typeof this.isLoadingSignal[0];
  setIsLoading: typeof this.isLoadingSignal[1];

  @callback
  toggleCard() {
    this.setIsLoading(true);
    setTimeout(() => {
      this.setIsOpen(!this.isOpen());
      this.setIsLoading(false);
    }, 1000);
  }
}

<fancy-toggle>
  <div class="wrapper">
    <button $click="toggleCard()" class="btn" type="button">
      open card
      <svg $display="isLoading()" class="spinner" viewBox="0 0 50 50">
        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
      </svg>
    </button>
    <div $display="isOpen()" class="card">
      <img src="https://images.unsplash.com/photo-1667693790254-cf2fda33c8bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80">
      <div class="text">
        <p class="title">Title</p>
        Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan.
      </div>
    </div>
  </div>
</fancy-toggle>