From 42c267a2247b85d3f3609a0e6f3afe8bc0eba3c2 Mon Sep 17 00:00:00 2001
From: "sigonasr2, Sig, Sigo" <sigonasr2@gmail.com>
Date: Tue, 14 Sep 2021 07:59:48 +0000
Subject: [PATCH] proper build load placeholders.

---
 src/App.js       |  3 ++-
 src/Builds.js    | 60 +++++++++++++++++++++++++++---------------------
 src/TestPanel.js | 32 ++++++++++++++++++--------
 3 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/App.js b/src/App.js
index ec21253..2fe8355 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1088,7 +1088,8 @@ function App() {
 					/>
 					<Builds 
 						GetData={GetData}
-						BACKENDURL={GetBackendURL(BACKENDURL)}/>
+						BACKENDURL={GetBackendURL(BACKENDURL)}
+						PANELPATHWBUILD={PANELPATHWBUILD}/>
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/formula"}>
 					<DamageCalculator/>
diff --git a/src/Builds.js b/src/Builds.js
index 0a4a25d..27df106 100644
--- a/src/Builds.js
+++ b/src/Builds.js
@@ -4,38 +4,42 @@ import ReactPlaceholder from 'react-placeholder';
 import "react-placeholder/lib/reactPlaceholder.css";
 import {HandThumbsUp} from 'react-bootstrap-icons'
 import { DisplayIcon } from './DEFAULTS';
+import { HashLink as Link } from 'react-router-hash-link';
 const axios = require('axios');
 
 function Build(p) {
+  const {PANELPATHWBUILD} = p
   const {build} = p
   const {GetData} = p
   const buildData = build.data?build.data[0]==='{'?JSON.parse(build.data):{}:{}
   return <div>
         <br/>
-        <div className="build">
-          <div className="buildID">#{build.id}</div><h2 className="buildTitle">&nbsp;{build.build_name}</h2> <div className="buildAuthor">(Created by <img className="buildAvatar"/>{build.creator})</div>
-          <div className="buildLikes"><HandThumbsUp/>{build.likes}</div>
-          <br/>
-          <div className="buildClass"><Class GetData={GetData} name={build.class1} useIDs hideName/><sub>{buildData?.level}</sub></div>
-          <div className="buildClass"><Class GetData={GetData} name={build.class2} useIDs hideName/><sub>{buildData?.secondaryLevel}</sub></div>
-          <div className="buildData">{build.created_on}</div>
-          <br/>
-          <div className="equipPalette buildPalette">
-            <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("weapon",buildData.weaponBaseName,"rarity")}>
-              <img className="buildImage" src={DisplayIcon(GetData("weapon_existence_data",buildData.weaponExistenceID,"icon",true))}/>
-            </div></div>
-            <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor1Name,"rarity")}>
-              <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor1Name,"icon"))}/>
-            </div></div>
-            <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor2Name,"rarity")}>
-              <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor2Name,"icon"))}/>
-            </div></div>
-            <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor3Name,"rarity")}>
-              <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor3Name,"icon"))}/>
-            </div></div>
-          </div>
-          {/*JSON.stringify(build)*/}
-        </div>
+        <Link to={PANELPATHWBUILD?.replace(":BUILDID",build.id)}>
+          <div className="build">
+            <div className="buildID">#{build.id}</div><h2 className="buildTitle">&nbsp;{build.build_name}</h2> <div className="buildAuthor">(Created by <img className="buildAvatar"/>{build.creator})</div>
+            <div className="buildLikes"><HandThumbsUp/>{build.likes}</div>
+            <br/>
+            <div className="buildClass"><Class GetData={GetData} name={build.class1} useIDs hideName/><sub>{buildData?.level}</sub></div>
+            <div className="buildClass"><Class GetData={GetData} name={build.class2} useIDs hideName/><sub>{buildData?.secondaryLevel}</sub></div>
+            <div className="buildData">{build.created_on}</div>
+            <br/>
+            <div className="equipPalette buildPalette">
+              <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("weapon",buildData.weaponBaseName,"rarity")}>
+                <img className="buildImage" src={DisplayIcon(GetData("weapon_existence_data",buildData.weaponExistenceID,"icon",true))}/>
+              </div></div>
+              <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor1Name,"rarity")}>
+                <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor1Name,"icon"))}/>
+              </div></div>
+              <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor2Name,"rarity")}>
+                <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor2Name,"icon"))}/>
+              </div></div>
+              <div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor3Name,"rarity")}>
+                <img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor3Name,"icon"))}/>
+              </div></div>
+            </div>
+            {/*JSON.stringify(build)*/}
+           </div>
+          </Link>
         <br/>
       <br/>
     <hr/>
@@ -44,18 +48,20 @@ function Build(p) {
 
 function Builds(p) {
 
-    const {GetData,BACKENDURL} = p
+    const {GetData,BACKENDURL,PANELPATHWBUILD} = p
     const [builds,setBuilds] = useState([])
     const [sort,setSort] = useState("date_updated")
     const [filter,setFilter] = useState("")
     const [filter_type,setFilterType] = useState("")
     const [page,setPage] = useState(0)
+    const [finished,setFinished] = useState(false)
 
 
     useEffect(()=>{
         axios.get(`${BACKENDURL}/getBuilds?sort_type=${sort}${filter_type!==""?`&filter_type=${filter_type}`:""}${filter_type!==""?`&filter=${encodeURI(filter)}`:""}${page!==0?`&offset=${page}`:""}`)
         .then((data)=>{
           setBuilds(data.data)
+          setFinished(true)
         })
     },[BACKENDURL,sort,filter_type,filter,page])
 
@@ -64,7 +70,9 @@ function Builds(p) {
           <div className="boxTitleBar">
             <h1>Builds List</h1>
           </div>
-          {builds.map((build)=><Build GetData={GetData} build={build}/>)}
+          <ReactPlaceholder showLoadingAnimation ready={finished} type="media" rows={32}>
+            {builds.map((build)=><Build PANELPATHWBUILD={PANELPATHWBUILD} GetData={GetData} build={build}/>)}
+          </ReactPlaceholder>
     </div></>
 }
 
diff --git a/src/TestPanel.js b/src/TestPanel.js
index 85a3a25..e72afac 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -467,6 +467,8 @@ const [prevFoodPointData,setPrevFoodPointData] = useState({})
 
 const [BUFFS,setBUFFS] = useState({})
 
+const [buildLoad,setBuildLoad] = useState(false)
+
 function SaveData() {
   var saveObj = {
     level:level,
@@ -537,6 +539,7 @@ useEffect(()=>{
 
 useEffect(()=>{
   if (BUILDID) {
+    setBuildLoad(false)
     axios.get(BACKENDURL+"/getBuild?id="+BUILDID)
       .then((data)=>{
         setAuthor(data.data.creator)
@@ -570,6 +573,11 @@ useEffect(()=>{
       .catch((err)=>{
         console.log(err.message)
       })
+      .finally(()=>{
+        setBuildLoad(true)
+      })
+    } else {
+      setBuildLoad(true)
     }
 },[BUILDID,GetData,BACKENDURL,p])
 
@@ -625,11 +633,11 @@ function deepCopySkills(skillData) {
 <div className="main">
   <div className="containerA">
 
-
-
     <div className="box basicInfoBox">
+
       <div className="boxTitleBar">
       <h1>Basic Information</h1></div>
+<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={12}>
       <div className="basicInfo">
 <div style={{gridArea:"author"}}>Author</div>
 <div style={{gridArea:"build"}}>Build Name</div>
@@ -673,17 +681,21 @@ function deepCopySkills(skillData) {
 
       </div><section className="saveControls">
       <button onClick={()=>{SaveData()}}>Save Build</button>
-      </section></div>
+      </section>
+      
+      
+      </ReactPlaceholder>
+      </div>
 
 
       <div className="box">
           <div className="boxTitleBar">
           <h1>Equip</h1></div>
           <div className="equipPalette">
-    <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div>
-                <div onClick={()=>{setArmorSlotSelection(1);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor1)}><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor1.icon)} /></div></div>
-                  <div onClick={()=>{setArmorSlotSelection(2);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor2)}><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor2.icon)} /></div></div>
-                  <div onClick={()=>{setArmorSlotSelection(3);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor3)}><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor3.icon)} /></div></div>
+            <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></ReactPlaceholder></div></div>
+                <div onClick={()=>{setArmorSlotSelection(1);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor1)}><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor1.icon)} /></ReactPlaceholder></div></div>
+                  <div onClick={()=>{setArmorSlotSelection(2);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor2)}><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor2.icon)} /></ReactPlaceholder></div></div>
+                  <div onClick={()=>{setArmorSlotSelection(3);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor3)}><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor3.icon)} /></ReactPlaceholder></div></div>
                 </div>
               </div>
 
@@ -695,7 +707,7 @@ function deepCopySkills(skillData) {
           <div className="box equipWindow">
             <div className="boxTitleBar">
               <h1>Equipped Weapon</h1></div>
-              <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"} type="media" rows={12}>
+              <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
               <div className="equipNameWrapper">
                 <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
             <div className="equipEnhancement editOverlayWrapper">
@@ -824,7 +836,7 @@ function deepCopySkills(skillData) {
       <div className="box">
       <div className="boxTitleBar">
       <h1>Current Effects</h1></div>
-      <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"} type="media" rows={7}>
+      <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={7}>
       <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
       {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setPrevFoodPointData({...foodPointData});setFoodMenuWindowOpen(true)}}>Food Boost Effect
             <ul>
@@ -849,6 +861,7 @@ function deepCopySkills(skillData) {
       <div className="box">
       <div className="boxTitleBar">
       <h1>Damage Stats</h1></div>
+      <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={6}>
       <PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
       <table>
         <tbody>
@@ -898,6 +911,7 @@ function deepCopySkills(skillData) {
           }
         </tbody>
       </table>
+      </ReactPlaceholder>
     </div>
   </div>
 </div>