add flatbox preloader

Hoffs · Apr 22, 2019 · 907d693 · 907d693
1 parent 83e3538
commit 907d693
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 3 deletions.
diff --git a/flatrent/src/Routes.tsx b/flatrent/src/Routes.tsx
@@ -65,6 +65,17 @@ const AuthRoutes: IRouteInfo[] = [
 
 // 50+
 const FlatRoutes: IRouteInfo[] = [
+  {
+    addToNav: false,
+    authentication: Authentication.Either,
+    component: FlatList,
+    exact: true,
+    link: "/",
+    order: 50,
+    redirect: "/login",
+    roles: [],
+    text: "Butai",
+  },
   {
     addToNav: true,
     authentication: Authentication.Either,

diff --git a/flatrent/src/scenes/Flats/FlatBox.module.css b/flatrent/src/scenes/Flats/FlatBox.module.css
@@ -94,3 +94,18 @@
   font-family: var(--text-font-family);
   font-weight: 600;
 }
+
+
+
+.loader {
+  width: 100%;
+  padding-top: 80%;
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.loader svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
diff --git a/flatrent/src/scenes/Flats/FlatBox.tsx b/flatrent/src/scenes/Flats/FlatBox.tsx
@@ -2,11 +2,12 @@ import React from "react";
 import FlexColumn from "../../components/FlexColumn";
 import { getImageUrl } from "../../services/ApiUtilities";
 import { getAddressString, IFlatListItem } from "../../services/FlatService";
-import { roomOrRooms, flatUrl } from "../../utilities/Utilities";
+import { roomOrRooms, flatUrl, joined } from "../../utilities/Utilities";
 import Styles from "./FlatBox.module.css";
 import SmartImg from "../../components/SmartImg";
 import { withRouter, Link } from "react-router-dom";
 import { RouterProps, RouteComponentProps } from "react-router";
+import ContentLoader from "react-content-loader";
 
 interface IFlatItemProps {
   flat: IFlatListItem;
@@ -34,4 +35,22 @@ const FlatBox = ({ flat }: IFlatItemProps) => {
   );
 };
 
+export const FlatBoxLoader = () => (
+  <div className={Styles.flatBox}>
+    <div className={Styles.loader} >
+      <ContentLoader
+        speed={2}
+        height={334}
+        width={400}
+        primaryColor="#f3f3f3"
+        secondaryColor="#ecebeb"
+      >
+        <rect x="0" y="0" rx="5" ry="5" width="400" height="266" />
+        <rect x="0" y="276" rx="4" ry="4" width="240" height="12" />
+        <rect x="0" y="296" rx="4" ry="4" width="290" height="12" />
+        <rect x="0" y="316" rx="4" ry="4" width="400" height="18" />
+      </ContentLoader>
+    </div>
+  </div>
+);
 export default FlatBox;
diff --git a/flatrent/src/scenes/Flats/FlatList.tsx b/flatrent/src/scenes/Flats/FlatList.tsx
@@ -6,9 +6,10 @@ import CreateFlatBox from "./FlatCreateBox";
 import FlatItem from "./FlatItem";
 import Card from "../../components/Card";
 import FlatFilters from "./FlatFilters";
-import FlatBox from "./FlatBox";
+import FlatBox, { FlatBoxLoader } from "./FlatBox";
 import FlexRow from "../../components/FlexRow";
 import Styles from "./FlatList.module.css";
+import ContentLoader from "react-content-loader";
 
 class FlatList extends Component<
   RouteComponentProps,
@@ -44,7 +45,7 @@ class FlatList extends Component<
     if (flats.length > 0) {
       return flats;
     } else {
-      return [<Card key={1}>Nuomojamų butų nėra</Card>];
+      return Array(12).fill(<FlatBoxLoader />);
     }
   }
 
@@ -68,4 +69,7 @@ class FlatList extends Component<
   }
 }
 
+
+
+
 export default FlatList;