RefreshButton.tsx

import { component$, sync$ } from "@builder.io/qwik";

export const RefreshButton = component$(({loading, onClick$, ...props}: any) => {
  const loading$ = sync$((_e: Event, target: HTMLButtonElement) => {
    const span = target.querySelector("span");
    target.disabled = span!.hidden;
    span!.hidden = !span!.hidden;
  });
  let clickListener = {};
  if (onClick$) {
    if (Array.isArray(onClick$)) {
      clickListener = { onClick$: [loading$, ...onClick$, loading$] };
    } else {
      clickListener = { onClick$: [loading$, onClick$, loading$] };
    }
  }

  return (
    <button {...props} {...clickListener}>
      Refresh <span hidden>{loading ? : loading : '(loading...)'}</span>
    </button>
  );
});