give the user menu a reasonable style and loading state

mitodl · Feb 14, 2025 · 6172147 · 6172147
1 parent c93b484
commit 6172147
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 39 deletions.
diff --git a/base-theme/assets/css/header.scss b/base-theme/assets/css/header.scss
@@ -86,6 +86,13 @@
           }
         }
       }
+
+      div#user-menu-container {
+        width: 40px;
+        img#user-menu-placeholder {
+          padding: 7px 13px;
+        }
+      }
     }
   }
 }

diff --git a/base-theme/assets/images/user.svg b/base-theme/assets/images/user.svg
diff --git a/base-theme/assets/js/components/UserMenu.tsx b/base-theme/assets/js/components/UserMenu.tsx
@@ -5,12 +5,13 @@ import { RiAccountCircleFill } from "@remixicon/react"
 import { useUserMe } from "../user"
 
 export default function UserMenu() {
-  const { data: user } = useUserMe()
+  const { data: user, isLoading } = useUserMe()
   const learnBaseUrl = process.env.MIT_LEARN_BASEURL
   const apiBaseUrl = process.env.MIT_LEARN_API_BASEURL
+  const encodedLocation = encodeURI(window.location.href)
   const dashboardUrl = new URL("/dashboard", learnBaseUrl).toString()
-  const logoutUrl = new URL("/logout", apiBaseUrl).toString()
-  const loginUrl = new URL("/login/ol-oidc", apiBaseUrl).toString()
+  const logoutUrl = new URL(`/logout?redirect_uri=${encodedLocation}`, apiBaseUrl).toString()
+  const loginUrl = new URL(`/login/ol-oidc?redirect_uri=${encodedLocation}`, apiBaseUrl).toString()
 
   return (
     <div className="dropdown">
@@ -23,46 +24,41 @@ export default function UserMenu() {
       >
         <RiAccountCircleFill size={24} />
       </button>
-      <ul className="dropdown-menu" aria-labelledby="userMenu">
-        {user?.isAuthenticated ? (
+      <div className="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
+        {!isLoading ? (
+          user?.isAuthenticated ? (
           <>
-            <li>
+            <div className="px-3 py-2">
               {user.first_name} {user.last_name}
-            </li>
-            <li>
-              <a
-                className="dropdown-item"
-                href={dashboardUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Dashboard
-              </a>
-            </li>
-            <li>
-              <a
-                className="dropdown-item"
-                href={logoutUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Logout
-              </a>
-            </li>
-          </>
-        ) : (
-          <li>
+            </div>
+            <a
+              className="dropdown-item text-capitalize"
+              href={dashboardUrl}
+              rel="noreferrer"
+            >
+              Dashboard
+            </a>
             <a
-              className="dropdown-item"
-              href={loginUrl}
-              target="_blank"
+              className="dropdown-item text-capitalize"
+              href={logoutUrl}
               rel="noreferrer"
             >
-              Login
+              Logout
             </a>
-          </li>
-        )}
-      </ul>
+          </>
+        ) : (
+          <a
+            className="dropdown-item text-capitalize"
+            href={loginUrl}
+            rel="noreferrer"
+          >
+            Login
+          </a>
+        )
+      ) : (
+        <div className="dropdown-item text-capitalize">Loading...</div>
+      )}
+      </div>
     </div>
   )
 }
diff --git a/base-theme/layouts/partials/header.html b/base-theme/layouts/partials/header.html
@@ -38,7 +38,9 @@
           {{ partial "link.html" (dict "href" $contactUrl "class" "nav-link" "text" "Contact Us") }}
         </li>
         <li>
-          <div id="user-menu-conatiner"></div>
+          <div id="user-menu-conatiner">
+            <div id="user-menu-placeholder" class="placeholder p-5"></div>
+          </div>
         </li>
       </ul>
     </div>
@@ -64,7 +66,9 @@
       {{ partial "link.html" (dict "href" $aboutUrl "class" "text-white text-decoration-none font-weight-bold pl-5 pr-3 py-2" "text" "about ocw") }}
       {{ partial "link.html" (dict "href" $zenDeskUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "help & faqs" "target" "_blank") }}
       {{ partial "link.html" (dict "href" $contactUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "contact us") }}
-      <div id="user-menu-container"></div>
+      <div id="user-menu-container">
+        <img id="user-menu-placeholder" src="{{- partial "get_asset_webpack_url.html" "images/user.svg" -}}" alt="User Menu Loading..." />
+      </div>
     </div>
   </div>
 </div>