463 use loadingframe component to reduce content layout shift cls

common/components/chrome/MainHeader.jsx

@@ -77,7 +77,11 @@ class MainHeader extends React.Component<{||}, State> {
       <Navbar collapseOnSelect expand="lg" bg="navlight" variant="light">
         <Navbar.Brand>
           <a href={urlHelper.section(Section.Home)}>
-            <img src={cdn.image("dl_logo.png")} alt="DemocracyLab - Home" />
+            <img
+              src={cdn.image("dl_logo.png")}
+              alt="DemocracyLab - Home"
+              style={{ width: "178px", height: "53px" }}
+            />
           </a>
         </Navbar.Brand>
         {CurrentUser.isLoggedIn() ? null : (
@@ -90,7 +94,10 @@ class MainHeader extends React.Component<{||}, State> {
           </Button>
         )}
         <Navbar.Toggle aria-controls="nav-pagenav-container" />
-        <Navbar.Collapse id="nav-pagenav-container" className="MainHeader-nav-flex">
+        <Navbar.Collapse
+          id="nav-pagenav-container"
+          className="MainHeader-nav-flex"
+        >
           <Nav className="MainHeader-usernav ml-auto">
             {CurrentUser.isLoggedIn()
               ? this._renderUserSection()

common/components/componentsBySection/FindEvents/EventCardsContainer.jsx

@@ -6,6 +6,7 @@ import { Container } from "flux/utils";
 import { List } from "immutable";
 import EntitySearchStore from "../../stores/EntitySearchStore.js";
 import type { LocationRadius } from "../../common/location/LocationRadius.js";
+import LoadingFrame from "../../chrome/LoadingFrame.jsx";
 import EventCardsListings from "./EventCardsListings.jsx";
 import type { EventTileAPIData } from "../../utils/EventAPIUtils.js";
 import _ from "lodash";
@@ -41,7 +42,9 @@ class EventCardsContainer extends React.Component<Props, State> {
   }
 
   render(): React$Node {
-    return (
+    return !this.state.events ? (
+      <LoadingFrame height="80vh" />
+    ) : (
       <div className="ProjectCardContainer col">
         {this.props.showSearchControls ? (
           <React.Fragment>

common/components/componentsBySection/FindGroups/GroupCardsContainer.jsx

@@ -9,7 +9,7 @@ import EntitySearchStore from "../../stores/EntitySearchStore.js";
 import UniversalDispatcher from "../../stores/UniversalDispatcher.js";
 import EntitySearchSort from "../../common/search/EntitySearchSort.jsx";
 import EntityTagContainer from "../../common/search/EntityTagContainer.jsx";
-import LoadingMessage from "../../chrome/LoadingMessage.jsx";
+import LoadingFrame from "../../chrome/LoadingFrame.jsx";
 import type { LocationRadius } from "../../common/location/LocationRadius.js";
 import { Dictionary, createDictionary } from "../../types/Generics.jsx";
 import type { TagDefinition } from "../../utils/ProjectAPIUtils.js";
@@ -95,7 +95,7 @@ class GroupCardsContainer extends React.Component<Props, State> {
 
   _renderCards(): React$Node {
     return !this.state.groups ? (
-      <LoadingMessage message="Loading groups..." />
+      <LoadingFrame height="80vh" />
     ) : this.state.groups.size === 0 ? (
       "No Groups match the provided criteria. Try a different set of filters or search term."
     ) : (

common/components/componentsBySection/FindProjects/ProjectCardsContainer.jsx

@@ -10,7 +10,7 @@ import { List } from "immutable";
 import ProjectCard from "./ProjectCard.jsx";
 import EntitySearchStore from "../../stores/EntitySearchStore.js";
 import UniversalDispatcher from "../../stores/UniversalDispatcher.js";
-import LoadingMessage from "../../chrome/LoadingMessage.jsx";
+import LoadingFrame from "../../chrome/LoadingFrame.jsx";
 import metrics from "../../utils/metrics.js";
 import { ProjectData } from "../../utils/ProjectAPIUtils.js";
 import type { LocationRadius } from "../../common/location/LocationRadius.js";
@@ -113,7 +113,7 @@ class ProjectCardsContainer extends React.Component<Props, State> {
       this.props.handleEmptyProject && this.props.handleEmptyProject();
     }
     return !this.state.projects ? (
-      <LoadingMessage message="Loading projects..." />
+      <LoadingFrame height="80vh" />
     ) : this.state.projects.size === 0 ? (
       "No projects match the provided criteria. Try a different set of filters or search term."
     ) : (

common/components/controllers/AboutEventController.jsx

@@ -6,6 +6,7 @@ import type { ProjectDetailsAPIData } from "../utils/ProjectAPIUtils.js";
 import metrics from "../utils/metrics.js";
 import Truncate from "../utils/truncate.js";
 import AboutProjectDisplay from "../common/projects/AboutProjectDisplay.jsx";
+import LoadingFrame from "../chrome/LoadingFrame.jsx";
 import { APIError } from "../utils/api.js";
 import url from "../utils/url.js";
 import EventAPIUtils, { EventData } from "../utils/EventAPIUtils.js";
@@ -36,11 +37,9 @@ class AboutEventController extends React.PureComponent<{||}, State> {
   }
 
   loadEventDetails(event: EventData) {
-    this.setState(
-      {
-        event: event,
-      },
-    );
+    this.setState({
+      event: event,
+    });
   }
 
   handleLoadEventFailure(error: APIError) {
@@ -63,11 +62,7 @@ class AboutEventController extends React.PureComponent<{||}, State> {
   }
 
   _renderLoadMessage(): React$Node {
-    return (
-      <React.Fragment>
-        <div>{this.state.loadStatusMsg}</div>
-      </React.Fragment>
-    );
+    return <LoadingFrame height="80vh" />;
   }
 }