Fix the Logo jumping on page loading (#4537)

* Create LogoWrapper

* esf

app/assets/stylesheets/application.bootstrap.scss

@@ -398,14 +398,14 @@ input[type='checkbox'] {
   max-height: $header-height;
 }
 
-.medium-logo {
-  max-width: 300px;
-  max-height: 150px;
+.logo {
+  max-width: 250px;
+  max-height: 125px;
 }
 
-.large-logo {
-  max-width: 400px;
-  max-height: 200px;
+.logo-wrapper {
+  width: 250px;
+  height: 125px;
 }
 
 /********** Range Input Styles **********/

app/javascript/components/errors/DefaultErrorPage.jsx

@@ -12,7 +12,7 @@ export default function DefaultErrorPage() {
   return (
     <div className="vertical-buffer">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-md-3 mx-auto p-4 border-0 shadow-sm text-center">
         <Card.Title className="pb-2 fs-1 text-danger">{ t('global_error_page.title') }</Card.Title>

app/javascript/components/errors/NotFoundPage.jsx

@@ -12,7 +12,7 @@ export default function NotFoundPage() {
   return (
     <div className="vertical-buffer">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-md-3 mx-auto p-4 border-0 shadow-sm text-center">
         <Card.Title className="pb-2 fs-1 text-danger">{ t('not_found_error_page.title') }</Card.Title>

app/javascript/components/home/HomePage.jsx

@@ -54,7 +54,7 @@ export default function HomePage() {
       <Row className="wide-white">
         <Col className="mx-auto">
           <div className="text-center pt-xl-5 my-3">
-            <Logo size="medium" />
+            <Logo />
           </div>
           <div className="text-center">
             <h1 className="my-4"> {t('homepage.welcome_bbb')} </h1>

app/javascript/components/rooms/room/join/RequireAuthentication.jsx

@@ -14,7 +14,7 @@ export default function RequireAuthentication({ path }) {
   return (
     <div className="vertical-center">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 shadow-sm text-center">
         <Card.Body className="pt-4 px-5">

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -142,7 +142,7 @@ export default function RoomJoin() {
   return (
     <div className="vertical-buffer">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-md-6 mx-auto p-0 border-0 shadow-sm">
         <Card.Body className="pt-4 px-5">

app/javascript/components/shared_components/Header.jsx

@@ -43,7 +43,7 @@ export default function Header() {
     <Navbar collapseOnSelect id="navbar" expand="sm">
       <Container className="ps-0">
         <Navbar.Brand as={Link} to={homePath} className="ps-2">
-          <Logo />
+          <Logo size="small" />
         </Navbar.Brand>
 
         <Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0">

app/javascript/components/shared_components/Logo.jsx

@@ -7,24 +7,32 @@ import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 export default function Logo({ size }) {
   const { isLoading, data: brandingImage } = useSiteSetting('BrandingImage');
   const navigate = useNavigate();
-  const sizeClass = `${size}-logo`;
 
-  if (isLoading) return null;
+  // Logo can be small or regular size
+  const sizeClass = size === 'small'
+    ? 'small-logo cursor-pointer'
+    : 'logo cursor-pointer position-absolute bottom-0 mx-auto start-0 end-0 text-center';
+  // Small Logo is used in Header only and does not require a wrapper
+  const sizeWrapperClass = !size && 'logo-wrapper position-relative d-block mx-auto';
+
+  if (isLoading) return <div className={sizeWrapperClass} />;
 
   return (
+    <div className={sizeWrapperClass}>
       <Image
         src={brandingImage}
-      className={`cursor-pointer ${sizeClass}`}
+        className={sizeClass}
         alt="CompanyLogo"
         onClick={() => { navigate('/'); }}
       />
+    </div>
   );
 }
 
 Logo.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.string,
 };
 
 Logo.defaultProps = {
-  size: 'small',
+  size: '',
 };

app/javascript/components/users/account_activation/VerifyAccount.jsx

@@ -16,7 +16,7 @@ export default function VerifyAccount() {
   return (
     <div className="vertical-buffer">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-md-4 mx-auto p-4 border-0 shadow-sm text-center">
         <Card.Title className="pb-2 fs-1 text-danger">{ t('account_activation_page.title') }</Card.Title>

app/javascript/components/users/authentication/SignIn.jsx

@@ -11,7 +11,7 @@ export default function SignIn() {
   return (
     <div className="vertical-center">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
         <Card.Title className="text-center pb-2"> { t('authentication.sign_in') } </Card.Title>

app/javascript/components/users/authentication/Signup.jsx

@@ -21,7 +21,7 @@ export default function Signup() {
   return (
     <div className="vertical-center">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
         <Card.Title className="text-center pb-2"> { t('authentication.create_an_account') } </Card.Title>

app/javascript/components/users/password_management/ForgetPassword.jsx

@@ -11,7 +11,7 @@ export default function ForgetPassword() {
   return (
     <div className="vertical-center">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
         <Card.Title className="text-center pb-2"> { t('user.account.reset_password')} </Card.Title>

app/javascript/components/users/password_management/ResetPassword.jsx

@@ -18,7 +18,7 @@ export default function ResetPassword() {
   return (
     <div className="vertical-center">
       <div className="text-center pb-4">
-        <Logo size="medium" />
+        <Logo />
       </div>
       <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 shadow-sm">
         <ResetPwdForm token={token} />