Spinner component questions about best practices

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;