All files / app/ui/loading LoadingOverlay.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
76x
 
76x
 
 
 
 
 
 
 
76x
834x
834x
834x
834x
 
834x
631x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203x
 
 
 
 
 
 
 
76x
 
import React, { Fragment, FunctionComponent } from 'react';
 
import LoadingSpinner from './LoadingSpinner';
 
export interface LoadingOverlayProps {
    isLoading: boolean;
    hideContentWhenLoading?: boolean;
    unmountContentWhenLoading?: boolean;
}
 
const LoadingOverlay: FunctionComponent<LoadingOverlayProps> = ({
    children,
    hideContentWhenLoading,
    unmountContentWhenLoading,
    isLoading,
}) => {
    if (hideContentWhenLoading || unmountContentWhenLoading) {
        return (
            <Fragment>
                <LoadingSpinner isLoading={ isLoading } />
                { unmountContentWhenLoading && isLoading ? null :
                    <div
                        style={ {
                            display: hideContentWhenLoading && isLoading ?
                                'none' :
                                undefined,
                        } }
                    >
                        { children }
                    </div> }
            </Fragment>
        );
    }
 
    return (
        <div className="loadingOverlay-container">
            { children }
            { isLoading && <div className="loadingOverlay optimizedCheckout-overlay" /> }
        </div>
    );
};
 
export default LoadingOverlay;