porter/dashboard/src/components/Loading.tsx

import React, { Component } from "react";
import styled from "styled-components";
import loading from "assets/loading.gif";

type PropsType = {
  offset?: string;
};

type StateType = {};

export default class Loading extends Component<PropsType, StateType> {
  state = {};

  render() {
    return (
      <StyledLoading offset={this.props.offset}>
        <Spinner src={loading} />
      </StyledLoading>
    );
  }
}

const Spinner = styled.img`
  width: 20px;
`;

const StyledLoading = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: ${(props: { offset?: string }) => props.offset};
`;