From 2e80f5aa92c389359162811f1cbf375a9b316368 Mon Sep 17 00:00:00 2001
From: ray <ray@oxd.com>
Date: Tue, 27 Feb 2024 11:14:53 -0800
Subject: [PATCH] DBC22-1806: applied skeleton to headers

---
 src/frontend/src/Components/events/EventCard.js     | 8 ++++----
 src/frontend/src/Components/events/EventsTable.js   | 6 +++++-
 src/frontend/src/Components/events/EventsTable.scss | 1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/Components/events/EventCard.js b/src/frontend/src/Components/events/EventCard.js
index ef5d3659c..430ca4256 100644
--- a/src/frontend/src/Components/events/EventCard.js
+++ b/src/frontend/src/Components/events/EventCard.js
@@ -29,26 +29,26 @@ export default function EventCard(props) {
 
       <div className="event-card__details">
         <div className="type">
-          <div className="header">Type</div>
+          <div className="header">{ showLoader ? <Skeleton /> : 'Type' }</div>
           <div className="content">
             { showLoader ? <Skeleton width={75} /> : <div>{icon} {event.severity.toLowerCase()}</div> }
           </div>
         </div>
 
         <div className="description">
-          <div className="header">Description</div>
+          <div className="header">{ showLoader ? <Skeleton /> : 'Description' }</div>
           <div className="content">{ showLoader ? <Skeleton count={7} /> : event.description }</div>
         </div>
 
         <div className="last-update">
-          <div className="header">Last Update</div>
+          <div className="header">{ showLoader ? <Skeleton /> : 'Last Update' }</div>
           <div className="content">
             { showLoader ? <Skeleton width={'90%'} /> : <FriendlyTime date={event.last_updated} /> }
           </div>
         </div>
 
         <div className="map">
-          <div className="header">Map</div>
+          <div className="header">{ showLoader ? <Skeleton /> : 'Map' }</div>
           <div className="content">
             { showLoader ? <Skeleton width={30} /> : <FontAwesomeIcon icon={faMapLocation} /> }
           </div>
diff --git a/src/frontend/src/Components/events/EventsTable.js b/src/frontend/src/Components/events/EventsTable.js
index 1d6fd39b2..0a3e757c6 100644
--- a/src/frontend/src/Components/events/EventsTable.js
+++ b/src/frontend/src/Components/events/EventsTable.js
@@ -149,7 +149,7 @@ export default function EventsTable(props) {
             {headerGroup.headers.map((header) => {
               return (
                 <th className={header.id} key={header.id} colSpan={header.colSpan}>
-                  {header.isPlaceholder ? null : (
+                  {!header.isPlaceholder && !showLoader && (
                     <span
                       {...{
                         className: header.column.getCanSort() ?
@@ -169,6 +169,10 @@ export default function EventsTable(props) {
                       }[header.column.getIsSorted()] ?? null}
                     </span>
                   )}
+
+                  {showLoader &&
+                    <Skeleton />
+                  }
                 </th>
               );
             })}
diff --git a/src/frontend/src/Components/events/EventsTable.scss b/src/frontend/src/Components/events/EventsTable.scss
index e1ef7b9a7..d4d8ee8f7 100644
--- a/src/frontend/src/Components/events/EventsTable.scss
+++ b/src/frontend/src/Components/events/EventsTable.scss
@@ -2,6 +2,7 @@
 
 table {
   font-size: 0.875rem;
+  width: 100%;
 
   thead {
     background-color: $BC-Blue-Light;