From 575793c8c046808ff381734e5de9197d5f0830f2 Mon Sep 17 00:00:00 2001
From: Ellen Duong <shi.ellenduong@gmail.com>
Date: Tue, 23 Jan 2024 09:34:26 -0500
Subject: [PATCH] refactor: add back in loading

---
 src/components/ContentPage.js | 10 ++++------
 src/components/PubsTable.js   |  5 +----
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/ContentPage.js b/src/components/ContentPage.js
index dc9ebdc..5335eb2 100755
--- a/src/components/ContentPage.js
+++ b/src/components/ContentPage.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBook } from "@fortawesome/free-solid-svg-icons";
-// import Spinner from "./Spinner";
+import Spinner from "./Spinner";
 import { PubsTable } from "./PubsTable";
 // import YearChart from "./YearChart";
 // import WordCloud from "./WordCloud";
@@ -40,11 +40,9 @@ export function ContentPage() {
         <h1 className="pl-2">Publications</h1>
       </div>
 
-      {/* TODO: Error Boundary */}
-      {/* TODO: Put back in suspense component */}
-      {/*<Spinner loading={this.props.loading} className="spinner" size={100} />*/}
+      <Spinner loading={publications.length === 0} className="spinner" size={100} />
 
-      <div id="main-content">
+      {publications.length !== 0 && (<div id="main-content">
         <div className="PubsTable-CP">
           <PubsTable publications={publications} />
         </div>
@@ -59,7 +57,7 @@ export function ContentPage() {
         {/*  <WordCloud />*/}
         {/*  <YearChart />*/}
         {/*</div>*/}
-      </div>
+      </div>)}
     </div>
   );
 }
diff --git a/src/components/PubsTable.js b/src/components/PubsTable.js
index 3a8e859..e3d5429 100755
--- a/src/components/PubsTable.js
+++ b/src/components/PubsTable.js
@@ -1,7 +1,6 @@
 import ReactTable from "react-table";
 import React from "react";
 import "react-table/react-table.css";
-import _ from "lodash";
 
 export function PubsTable({ publications }) {
   const changetoHTML = (url) => <a href={url.value}>{url.value}</a>;
@@ -13,8 +12,6 @@ export function PubsTable({ publications }) {
       : false;
   }
 
-  var filteredData = _.cloneDeep(publications)
-
   const columns = [
     {
       Header: "Title",
@@ -41,7 +38,7 @@ export function PubsTable({ publications }) {
 
     return (
       <ReactTable
-        data={filteredData}
+        data={publications}
         columns={columns}
         filterable
         defaultFilterMethod={(filter, row) =>