Add spinner on click

frontend/src/components/molecules/NavBarBrand/index.tsx

@@ -9,26 +9,66 @@ interface NavBarBrandProps {
   onClick: (event: React.MouseEvent<HTMLImageElement>) => void;
 }
 
-const NavBarBrand: React.FC<NavBarBrandProps> = ({
-  onClick,
-}: NavBarBrandProps) => {
-  return (
-    <Navbar.Brand className={styles.brandContainer}>
-      <img
-        src={logo}
-        width="30"
-        height="30"
-        className={cx(
-          "d-inline-block",
-          "align-center",
-          styles.brandImage
-        )}
-        alt="React Bootstrap logo"
-        onClick={(e) => onClick(e)}
-      />
-      <Link to="/">Scientia</Link>
-    </Navbar.Brand>
-  );
-};
+interface NavBarBrandState {
+  iconRotate: boolean;
+}
+
+class NavBarBrand extends React.Component<NavBarBrandProps, NavBarBrandState> {
+  brandIcon: HTMLImageElement | null;
+
+  constructor(props: NavBarBrandProps) {
+    super(props);
+    this.state = { iconRotate: false };
+    this.brandIcon = null;
+  }
+
+  componentDidMount() {
+    if (this.brandIcon) {
+      this.brandIcon.addEventListener("animationend", () =>
+        this.rotatingDone()
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.brandIcon) {
+      this.brandIcon.removeEventListener("animationend", () =>
+        this.rotatingDone()
+      );
+    }
+  }
+
+  rotatingDone() {
+    this.setState({
+      iconRotate: false,
+    });
+  }
+
+  render() {
+    return (
+      <Navbar.Brand className={styles.brandContainer}>
+        <img
+          src={logo}
+          width="30"
+          height="30"
+          className={cx("d-inline-block", "align-center", styles.brandImage, {
+            rotate: this.state.iconRotate,
+          })}
+          alt="Scientia logo"
+          onClick={(e) => {
+            this.setState({
+              iconRotate: true,
+            });
+            this.props.onClick(e);
+          }}
+          ref={(elm) => {
+            this.brandIcon = elm;
+          }}
+        />
+        <Link to="/">Scientia</Link>
+      </Navbar.Brand>
+    );
+  }
+}
 
 export default NavBarBrand;

frontend/src/components/molecules/NavBarBrand/style.module.scss

@@ -22,3 +22,16 @@
 	text-decoration: none !important;
 }
 
+:global(.rotate) {
+	animation: rotate-keyframes 0.25s;
+ }
+ 
+ @keyframes rotate-keyframes {
+	from {
+	 transform: rotate(0deg);
+	}
+ 
+	to {
+	 transform: rotate(-90deg);
+	}
+ }
\ No newline at end of file