animations, loading, yadayada

src/components/BrowseComponent.js

@@ -8,20 +8,29 @@ export default class BrowseComponent extends Component {
     super(props);
     this.state = {
       cableList: [],
+      isLoading: true,
     };
   }
 
   componentDidMount() {
     this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
     this.props.socket.addEventListener("message", this.handleMessage);
+    setTimeout(() => {
+      this.setState({ isLoading: false });
+    }, 500);
   }
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const cableList = this.browseParse(message);
-      this.setState({ cableList });
+      if (!this.state.isLoading) {
+        this.setState({ cableList });
+      } else {
+        setTimeout(() => {
+          this.setState({ cableList });
+        }, 500 - new Date());
+      }
     } catch (error) {
       console.error("Error parsing message from server:", error);
     }
@@ -63,9 +72,26 @@ export default class BrowseComponent extends Component {
 
   searchUpdate = () => {
     let value = document.querySelector(".browse-search input").value;
-    this.props.socket.send(`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`);
+    this.props.socket.send(
+      `{"type":"cable_search","call":"request","data":{"string":"${value}"}}`
+    );
   };
 
+  returnPlaceholder() {
+    return (
+      <div className="browse-cable">
+        <div className="browse-cable-image" />
+        <div className="browse-cable-label">
+          <div className="browse-cable-name"></div>
+          <div className="browse-cable-description"></div>
+          <div className="browse-cable-brand"></div>
+          <div className="browse-cable-position"></div>
+        </div>
+        <span className="browse-cable-arrow">{">"}</span>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="browse">
@@ -81,9 +107,22 @@ export default class BrowseComponent extends Component {
               placeholder="🔎 Start typing to search..."
             />
           </div>
-          {this.state.cableList.map((cableObj, index) => (
-            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
-          ))}
+          {this.state.isLoading ? (
+            <React.Fragment>
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+            </React.Fragment>
+          ) : (
+            this.state.cableList.map((cableObj, index) => (
+              <React.Fragment key={index}>
+                {cableObj.returnDiv()}
+              </React.Fragment>
+            ))
+          )}
         </div>
       </div>
     );

src/components/CableDetailComponent.js

@@ -57,6 +57,7 @@ class Cable {
           "description",
           "application",
           "category",
+          "datasheet"
         ].includes(key)
       ) {
         this.dynamicProps[key] = cableData[key];

src/components/MapComponent.js

@@ -3,6 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import cable from "../utils/Cable";
 import "../assets/stylesheets/map.scss";
 import { NavLink } from "react-router-dom";
+import "animate.css"
 
 export default class MapComponent extends Component {
   constructor(props) {