SolidJSS
SolidJS•3y ago•
2 replies
akerbeltz

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;
Was this page helpful?