📁 Changed TDrive root folder (#16)

📁 Changed TDrive root folder

tdrive/frontend/src/app/components/loader/application-loader.tsx

@@ -0,0 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+import React from 'react';
+import Languages from 'app/features/global/services/languages-service';
+
+type PropsType = {
+  message?: string;
+};
+
+export default (props: PropsType) => (
+  <div
+    id="application_loader"
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      position: 'absolute',
+      // push it below the infinite loader which is defined in index.html
+      top: 'calc(50% + 50px)',
+      width: '100%',
+      color: 'var(--white)',
+      textAlign: 'center',
+    }}
+  >
+    <div>
+      {props.message ||
+        Languages.t(
+          'application.load.longer',
+          [],
+          'Server takes longer than expected to reply, please wait or reload the page...',
+        )}
+    </div>
+  </div>
+);

tdrive/frontend/src/app/components/loader/loader.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+export default class Loader extends React.Component {
+  render() {
+    return (
+      <div className={this.props.className}>
+        <svg viewBox="0 0 100 100" enableBackground="new 0 0 0 0">
+          <path
+            fill={this.props.color || '#FFF'}
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+      </div>
+    );
+  }
+}