<commit_before>import React, { Children } from 'react';
import { createComponent } from 'react-fela';
import Container from '../container';
import Grid from '../grid';

// const loaderSchema2 = `450f,[c[m5[100,200,400]]g]`
const Panel = createComponent(
  ({ height, width, pad, theme }) => ({
    height,
    width,
    paddingRight: pad ? theme.space3 : 0,
    marginBottom: theme.space3,
  }),
  'div',
  []
);

export const ContentLoaderStyles = {
  animationDuration: '1s',
  animationFillMode: 'forwards',
  animationIterationCount: 'infinite',
  animationTimingFunction: 'linear',
  // background: '#f6f7f8',
  background: 'linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%)',
  backgroundSize: '200% 100%',
  animationName: {
    '0%': {
      backgroundPosition: '100% 0',
    },
    '100%': {
      backgroundPosition: '-100% 0',
    },
  },
};

const ContentLoader = createComponent(
  ({ height, width }) => ({
    height: height || '100%',
    // minHeight: 96,
    width: width || '100%',
    ...ContentLoaderStyles,
  }),
  ({ className, isLoading, children }) => {
    if (isLoading) {
      return <div className={className} />;
    }
    if (children) {
      return Children.only(children);
    }
    return null;
  },
  props => Object.keys(props)
);

export const SchemaLoader = ({ schema, isLoading, children }) => {
  if (isLoading) {
    const components = schema.map((item, i) =>
      <SchemaLoaderItem key={i} {...item} />
    );
    return <div>{components}</div>;
  }
  if (children) {
    return Children.only(children);
  }
  return null;
};

const SchemaLoaderItem = ({ height, width, grid }) => {
  let inner;
  if (grid) {
    inner = (
      <Grid height="100%">
        {grid.map(({ children, ...item }, i) =>
          (<Grid.Item key={i} height="100%" {...item}>
            <Panel height="100%" width="100%" pad>
              {children
                ? children.map((child, i) =>
                  (<Panel key={i}>
                    <ContentLoader isLoading {...child} />
                  </Panel>)
                  )
                : <ContentLoader isLoading />}
            </Panel>
          </Grid.Item>)
        )}
      </Grid>
    );
  } else {
    inner = <ContentLoader isLoading />;
  }

  if (width === 'container') {
    return (
      <Container height={height}>
        <Panel height="100%" width="100%">
          {inner}
        </Panel>
      </Container>
    );
  }
  return (
    <Panel height={height} width={width}>
      {inner}
    </Panel>
  );
};

export default ContentLoader;<commit_msg>content-loader cleanup<commit_after>import React, { Children } from 'react';
import { createComponent } from 'react-fela';

export const ContentLoaderStyles = {
  animationDuration: '1s',
  animationFillMode: 'forwards',
  animationIterationCount: 'infinite',
  animationTimingFunction: 'linear',
  // background: '#f6f7f8',
  background: 'linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%)',
  backgroundSize: '200% 100%',
  animationName: {
    '0%': {
      backgroundPosition: '100% 0',
    },
    '100%': {
      backgroundPosition: '-100% 0',
    },
  },
};

export default createComponent(
  ({ height, width }) => ({
    height: height || '100%',
    // minHeight: 96,
    width: width || '100%',
    ...ContentLoaderStyles,
  }),
  ({ className, isLoading, children }) => {
    if (isLoading) {
      return <div className={className} />;
    }
    if (children) {
      return Children.only(children);
    }
    return null;
  },
  props => Object.keys(props)
);
{'fraction_non_alphanumeric': 0.17397414277684092, 'fraction_numerical': 0.02951096121416526, 'mean_word_length': 2.5412935323383086, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2537952', 'n_tokens_mistral': 1199, 'n_tokens_neox': 1111, 'n_words': 259}