import React from 'react';
import PropTypes from 'prop-types';

import { areWeFunYet, translate as $t } from '../../helpers';
import ExternalLink from './external-link.js';

let showLicense = areWeFunYet();

const LoadingMessage = props => {
    let message = props.message || $t('client.spinner.generic');

    let license = showLicense ? (
        <div>
            {$t('client.spinner.license')}
            <ExternalLink href="https://liberapay.com/Kresus">Kresus</ExternalLink>
        </div>
    ) : null;

    return (
        <div className="loading-modal">
            <h3>{$t('client.spinner.title')}</h3>
            <div>
                <div className="spinner" />
                <div>{message}</div>
                {license}
            </div>
        </div>
    );
};

LoadingMessage.propTypes = {
    // Message indicating why we're doing background loading (and the UI is
    // frozen).
    message: PropTypes.string
};

export default LoadingMessage;

@@ -165,16 +165,54 @@
 ink.js';
+%0Aimport DisplayIf from './display-if';
 %0A%0Alet sh
@@ -347,50 +347,55 @@
     
-let license = showLicense ? (%0A        %3Cdiv
+return (%0A        %3Cdiv className=%22loading-modal%22
 %3E%0A  
@@ -404,16 +404,20 @@
         
+%3Ch3%3E
 %7B$t('cli
@@ -432,18 +432,21 @@
 ner.
-license')%7D
+title')%7D%3C/h3%3E
 %0A   
@@ -459,178 +459,196 @@
    %3C
-ExternalLink href=%22https://liberapay.com/Kresus%22%3EKresus%3C/ExternalLink%3E%0A        %3C/div%3E%0A    ) : null;%0A%0A    return (%0A        %3Cdiv className=%22loading-modal%22%3E%0A            %3Ch3%3E
+div%3E%0A                %3Cdiv className=%22spinner%22 /%3E%0A                %3Cdiv%3E%7Bmessage%7D%3C/div%3E%0A                %3CDisplayIf condition=%7BshowLicense%7D%3E%0A                    %3Cdiv%3E%0A                        
 %7B$t(
@@ -659,37 +659,34 @@
 ent.spinner.
-title')%7D%3C/h3%3E
+license')%7D
 %0A           
@@ -678,38 +678,32 @@
 ')%7D%0A            
-%3Cdiv%3E%0A
                 
@@ -702,38 +702,78 @@
     
-    %3Cdiv className=%22spinner%22 /
+%3CExternalLink href=%22https://liberapay.com/Kresus%22%3EKresus%3C/ExternalLink
 %3E%0A  
@@ -782,38 +782,28 @@
             
-%3Cdiv%3E%7Bmessage%7D
+    
 %3C/div%3E%0A     
@@ -817,17 +817,20 @@
     
-%7Blicense%7D
+%3C/DisplayIf%3E
 %0A   

Use DisplayIf in the licence.