<commit_before>import React from 'react'; // eslint-disable-line no-unused-vars
import Spinning from 'grommet/components/icons/Spinning';
import AlertIcon from 'grommet/components/icons/base/Alert';
import { asyncComponent } from 'react-async-component';
import cn from 'classnames';

const ErrorComponent = ({ screen }) => (
    <div
        data-screen-id={screen.definition.id}
        className={cn('async-loading', 'error', { 'is-active': screen.isActive })}
    >
        <div className="content">
            <AlertIcon /> Failed to load {screen.definition.title}…
        </div>
    </div>
);

const LoadingComponent = ({ screen }) => (
    <div
        data-screen-id={screen.definition.id}
        className={cn('async-loading', 'is-loading', { 'is-active': screen.isActive })}
    >
        <div className="content">
            <Spinning /> Loading {screen.definition.title}…
        </div>
    </div>
);


export default function asyncLoading({ screen, resolve }) {
    return asyncComponent({
        ErrorComponent,
        LoadingComponent,
        resolve,
        screen,
    });
}
<commit_msg>add retry button for failure loading<commit_after>import React from 'react'; // eslint-disable-line no-unused-vars
import Spinning from 'grommet/components/icons/Spinning';
import FormRefreshIcon from 'grommet/components/icons/base/FormRefresh';
import AlertIcon from 'grommet/components/icons/base/Alert';
import Button from 'grommet/components/Button';
import { asyncComponent } from 'react-async-component';
import cn from 'classnames';

const ErrorComponent = ({ screen, retry }) => (
    <div
        data-screen-id={screen.definition.id}
        className={cn('async-loading', 'error', { 'is-active': screen.isActive })}
    >
        <div className="content">
            <h4><AlertIcon /> Failed to load {screen.definition.title}…</h4>
            <Button
                icon={<FormRefreshIcon />}
                onClick={retry}
                label="Retry"
            />
        </div>
    </div>
);


const LoadingComponent = ({ screen }) => (
    <div
        data-screen-id={screen.definition.id}
        className={cn('async-loading', 'is-loading', { 'is-active': screen.isActive })}
    >
        <div className="content">
            <h4><Spinning /> Loading {screen.definition.title}…</h4>
        </div>
    </div>
);


export default function asyncLoading({ screen, resolve }) {
    return asyncComponent({
        ErrorComponent,
        LoadingComponent,
        resolve,
        screen,
    });
}

{'fraction_non_alphanumeric': 0.14601420678768745, 'fraction_numerical': 0.0015785319652722968, 'mean_word_length': 2.69533527696793, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, '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': '3384063', 'n_tokens_mistral': 736, 'n_tokens_neox': 718, 'n_words': 154}