Placeholders added appropriately.

src/TestHeader.js

@@ -45,7 +45,7 @@ function TestHeader(p) {
                     <section className="miniNav"><a href=".">&#9776;</a></section>
                 </div>
                 <div className="rightNav">
-                    <section className="loginNav"><a href="."><ReactPlaceholder style={{width:120,height:20,position:"relative",top:20}} showLoadingAnimation ready={!loading} type="rect" rows={1}><img alt="." src={DisplayIcon(avatar)} /> {username??"Guest"}  &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></ReactPlaceholder></a></section>
+                    <section className="loginNav"><a href="."><ReactPlaceholder style={{width:240,height:42}} showLoadingAnimation ready={!loading} type="media" rows={1}><img alt="." src={DisplayIcon(avatar)} /> {username??"Guest"}  &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></ReactPlaceholder></a></section>
                     <section className="miniNav"><a href="."><ReactPlaceholder style={{width:42,height:42}} showLoadingAnimation ready={!loading} type="round" rows={1}><img alt="." src={DisplayIcon(avatar)} /></ReactPlaceholder></a></section>
                 </div>
             </div>

src/TestPanel.js

@@ -6,9 +6,10 @@ import { ExpandTooltip } from './components/ExpandTooltip';
 import { SkillTree } from './skilltree/skillTree';
 import axios from 'axios';
 import Helmet from 'react-helmet'
+import ReactPlaceholder from 'react-placeholder';
+import "react-placeholder/lib/reactPlaceholder.css";
 
 import { useLocation,useHistory,useParams,matchPath } from 'react-router'
-import { ArrowUpShort } from 'react-bootstrap-icons'
 
 //Helper variables for Weapon selector with structure: [weapon_type,weapon,potential,potential_tooltip,weapon_existence_data]
 const WEAPON_WEAPONTYPE=0;const WEAPON_WEAPON=1;const WEAPON_POTENTIAL=2;const WEAPON_POTENTIAL_TOOLTIP=3;const WEAPON_EXISTENCE_DATA=4;
@@ -69,7 +70,7 @@ function PageControl(p) {
 function Class(p) {
   const CLASSES = p.GetData("class")
 	const class_obj = CLASSES[p.name]
-	return CLASSES!=="no data"?class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></>:<>-</>
+	return <ReactPlaceholder style={{height:8}} showLoadingAnimation ready={CLASSES!=="no data"} type="textRow" rows={1}>{class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></>}</ReactPlaceholder>
 }
 
 function EditableClass(p){
@@ -704,6 +705,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}>
               <div className="equipNameWrapper">
                 <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
             <div className="equipEnhancement editOverlayWrapper">
@@ -809,7 +811,7 @@ function deepCopySkills(skillData) {
               :
               <>hi2</>
             }
-
+          </ReactPlaceholder>
 
           </div>
 
@@ -832,6 +834,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}>
       <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>
@@ -851,6 +854,7 @@ function deepCopySkills(skillData) {
             </ul>
           </li></ul></>:<></>
       }
+      </ReactPlaceholder>
       </div>
       <div className="box">
       <div className="boxTitleBar">

src/components/placeholders/LoginPlaceholder.js

@@ -0,0 +1,19 @@
+
+import ReactPlaceholder from 'react-placeholder';
+import { MediaBlock,TextRow } from 'react-placeholder/lib/placeholders';
+import "react-placeholder/lib/reactPlaceholder.css";
+
+const CustomPlaceholder = (
+    <div>
+        <MediaBlock color="rgba(255,255,255)" style={{}}/>
+        <TextRow color="rgba(255,255,255)" style={{width:240,position:"relative",height:100}} rows={3}/>
+    </div>
+)
+
+function LoginPlaceholder(p) {
+    return <ReactPlaceholder customPlaceholder={CustomPlaceholder} showLoadingAnimation {...p}>
+        {p.children}
+        </ReactPlaceholder>
+}
+
+export default LoginPlaceholder;

touhous

@@ -0,0 +1,2 @@
+【東方 Touhou Vocal】Sentence - EURO mix【Sliver Forest】
+[Touhou Vocal] [GET IN THE RING] Last Remote～Blaze mix (spanish & english subtitles)