SolidJS•15mo ago

Spinner component questions about best practices

What would be the best way to show a spinner only if a loading() signal spends more than 2 seconds (that is when a resource). I'm thinking setting that on the Spinner component directly but there's a better way? Also the spinner usually appears on each page of the app centered so I created a prop that wraps it in a div and centers it, rendered conditionally with the wrapper or alone, what do you thing?

import { Component, Show, createSignal, onCleanup, onMount } from 'solid-js';
import './Spinner.scss';

interface Props {
  inPage: boolean;
}

const Spinner: Component<Props> = (props) => {
  const [showSpinner, setShowSpinner] = createSignal();
  const timeoutSpinner = setTimeout(() => {
    setShowSpinner(true);
  }, 1000);

  onCleanup(() => {
    clearTimeout(timeoutSpinner);
  });

  return (
    <Show when={showSpinner()}>
      <Show when={props.inPage} fallback={<div class='cir-spinner'></div>}>
        <div style={{ 'max-width': '600px', 'height': '500px' }}>
          <div
            style={{
              display: 'flex',
              'justify-content': 'center',
              'align-items': 'center',
              height: '100%',
            }}
          >
            <div class='cir-spinner'></div>
          </div>
        </div>
      </Show>
    </Show>
  );
};

export default Spinner;

import { Component, Show, createSignal, onCleanup, onMount } from 'solid-js';
import './Spinner.scss';

interface Props {
  inPage: boolean;
}

const Spinner: Component<Props> = (props) => {
  const [showSpinner, setShowSpinner] = createSignal();
  const timeoutSpinner = setTimeout(() => {
    setShowSpinner(true);
  }, 1000);

  onCleanup(() => {
    clearTimeout(timeoutSpinner);
  });

  return (
    <Show when={showSpinner()}>
      <Show when={props.inPage} fallback={<div class='cir-spinner'></div>}>
        <div style={{ 'max-width': '600px', 'height': '500px' }}>
          <div
            style={{
              display: 'flex',
              'justify-content': 'center',
              'align-items': 'center',
              height: '100%',
            }}
          >
            <div class='cir-spinner'></div>
          </div>
        </div>
      </Show>
    </Show>
  );
};

export default Spinner;

2 Replies

thetarnav•15mo ago

const isShownSignal = createMemo(() => {
  const is_loading = isLoading()
  const [isShown, setShown] = creteSignal(!is_loading)
  if (is_loading) {
    const timeout = setTiemout(() => setShown(true), 2000)
    onCleanup(() => clearTimout(timeout))
  }
  return isShown
})
const isShown = () => isShownSignal()()

const isShownSignal = createMemo(() => {
  const is_loading = isLoading()
  const [isShown, setShown] = creteSignal(!is_loading)
  if (is_loading) {
    const timeout = setTiemout(() => setShown(true), 2000)
    onCleanup(() => clearTimout(timeout))
  }
  return isShown
})
const isShown = () => isShownSignal()()

thats what I'm thinking not sure if it helps

akerbeltzOP•15mo ago

hmm i see

Gaming

Programming

Spinner component questions about best practices