-
+
{error && (
Error: {error}
)}
diff --git a/frontend/components/Nav/navIcons.module.css b/frontend/components/Nav/navIcons.module.css
index 0313d4402..8dc213d9f 100644
--- a/frontend/components/Nav/navIcons.module.css
+++ b/frontend/components/Nav/navIcons.module.css
@@ -12,6 +12,27 @@
color: #303463;
}
+.signInPulse {
+ animation: signInPulse 0.9s ease-out;
+}
+
+@keyframes signInPulse {
+ 0% {
+ transform: scale(1);
+ box-shadow: 0 0 0 0 rgba(48, 52, 99, 0.4);
+ }
+
+ 30% {
+ transform: scale(1.06);
+ box-shadow: 0 0 0 10px rgba(48, 52, 99, 0.18);
+ }
+
+ 100% {
+ transform: scale(1);
+ box-shadow: 0 0 0 0 rgba(48, 52, 99, 0);
+ }
+}
+
@media screen and (max-width: 700px) {
.createIcon {
display: none;
diff --git a/frontend/components/Nav/navIcons.tsx b/frontend/components/Nav/navIcons.tsx
index 5df31ac62..b65148981 100644
--- a/frontend/components/Nav/navIcons.tsx
+++ b/frontend/components/Nav/navIcons.tsx
@@ -16,6 +16,7 @@ export default function NavIcons() {
const router = useRouter()
const [open, setOpen] = React.useState(false)
+ const [pulseSignin, setPulseSignin] = React.useState(false)
const anchorRef = React.useRef
(null)
const handleToggle = () => {
@@ -59,6 +60,39 @@ export default function NavIcons() {
prevOpen.current = open
}, [open])
+ React.useEffect(() => {
+ if (isLoggedIn) {
+ setPulseSignin(false)
+ return
+ }
+
+ let timeoutId: number | undefined
+
+ const handleLoginRequiredSearch = () => {
+ setPulseSignin(false)
+ window.requestAnimationFrame(() => {
+ setPulseSignin(true)
+ })
+
+ if (timeoutId) {
+ window.clearTimeout(timeoutId)
+ }
+
+ timeoutId = window.setTimeout(() => {
+ setPulseSignin(false)
+ }, 900)
+ }
+
+ window.addEventListener("npdc:login-required-search", handleLoginRequiredSearch)
+
+ return () => {
+ window.removeEventListener("npdc:login-required-search", handleLoginRequiredSearch)
+ if (timeoutId) {
+ window.clearTimeout(timeoutId)
+ }
+ }
+ }, [isLoggedIn])
+
return (
{!isLoggedIn && (
@@ -76,6 +110,7 @@ export default function NavIcons() {