animations, loading, yadayada

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "animate.css": "^4.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-modal": "^3.16.1",
@@ -4970,6 +4971,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",

src/assets/stylesheets/browse.scss

@@ -32,7 +32,6 @@ $white: #fff;
 }
 
 .browse-image img {
-  margin-top: 50px;
   width: auto;
   height: 200px;
   background-color: transparent;
@@ -50,6 +49,8 @@ $white: #fff;
   overflow: hidden;
   background-color: transparent;
   margin-bottom: 50px;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .browse-title {
@@ -93,14 +94,15 @@ $white: #fff;
   height: 75%;
   margin-right: 25px;
   margin-left: 20px;
-  background-color: transparent;
+  background-color: white;
   border: $gray solid 1px;
   border-radius: 10px;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  aspect-ratio: 1/1;
 }
 
 .browse-cable-label {
-  width: 90%;
+  width: 83%;
   height: auto;
   background-color: transparent;
 }

src/assets/stylesheets/cabledetail.scss

@@ -48,6 +48,8 @@ $white: #fff;
   flex-direction: column;
   overflow: hidden;
   background-color: transparent;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .cable-main {

src/assets/stylesheets/map.scss

@@ -48,6 +48,8 @@ $white: #fff;
   flex-direction: column;
   overflow: visible;
   background-color: transparent;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .map-title {
@@ -103,7 +105,7 @@ $white: #fff;
 
 .map-box-row {
   width: 100%;
-  height: 70px;
+  height: 60px;
   background-color: transparent;
   border-radius: 20px;
   display: flex;
@@ -114,8 +116,9 @@ $white: #fff;
 }
 
 .map-box-circle, .map-box-spacer {
-  width: 70px;
+  width: 60px;
-  height: 70px;
+  height: 60px;
+  aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
     15deg,

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) => (
+          {this.state.isLoading ? (
-            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
+            <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) {