Merge pull request #5 from JelteMX/fix/ie11

Update to new timeline component

Author: JelteMX

widgets/container/package-lock.json

@@ -29,12 +29,11 @@
     "@types/jest": "^24.0.0",
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
-    "@types/react-test-renderer": "^16.8.1",
-    "@types/react-vertical-timeline-component": "^2.5.0"
+    "@types/react-test-renderer": "^16.8.1"
   },
   "dependencies": {
     "big.js": "^5.2.2",
     "classnames": "^2.2.6",
-    "react-vertical-timeline-component": "^2.5.0"
+    "rc-vertical-timeline": "^1.0.0"
   }
 }

widgets/container/package.json

@@ -1,21 +1,23 @@
 import { Component, ReactNode, createElement } from "react";
-import { VerticalTimeline } from "react-vertical-timeline-component";
+import { VerticalTimeline } from "rc-vertical-timeline";
 import { hot } from "react-hot-loader/root";
 import { TimelineContainerContainerProps } from "../typings/TimelineContainerProps";
 
 import "./ui/TimelineContainer.scss";
+// import "rc-vertical-timeline/build/index.css";
 
 class TimelineContainer extends Component<TimelineContainerContainerProps> {
     render(): ReactNode {
         const { animate, dataSource, elements, layout } = this.props;
 
-        if (dataSource.status !== "available") {
+        if (dataSource.status === "unavailable") {
             return null;
         }
 
         return (
             <VerticalTimeline
                 className={this.props.class}
+                loading={dataSource.status === "loading"}
                 animate={animate}
                 layout={layout === "twoColumn" ? "2-columns" : "1-column"}
             >

widgets/container/src/TimelineContainer.tsx

@@ -1,5 +1,5 @@
 import { Component, ReactNode, createElement } from "react";
-import { VerticalTimeline } from "react-vertical-timeline-component";
+import { VerticalTimeline } from "rc-vertical-timeline";
 import { TimelineContainerPreviewProps } from "../typings/TimelineContainerProps";
 
 declare function require(name: string): string;