fix uwu flicker (#6820)

* Try next/image

* Fix styles.css

* rm unneeded styles

* priority=true

* tweaks

* Static height

* tweak

* priority

Author: rickhanlonii

src/components/Layout/HomeContent.js

@@ -27,6 +27,7 @@ import CodeBlock from 'components/MDX/CodeBlock';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
 import * as React from 'react';
+import Image from 'next/image';
 
 function Section({children, background = null}) {
   return (
@@ -117,10 +118,12 @@ export function HomeContent() {
       <div className="ps-0">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
           <div className="uwu-visible flex justify-center">
-            <img
+            <Image
               alt="logo by @sawaratsuki1004"
               title="logo by @sawaratsuki1004"
-              className="uwu-visible h-24 lg:h-40"
+              loading="eager"
+              width={313}
+              height={160}
               src="/images/uwu.png"
             />
           </div>

src/components/Layout/TopNav/TopNav.tsx

@@ -10,6 +10,7 @@ import {
   startTransition,
   Suspense,
 } from 'react';
+import Image from 'next/image';
 import * as React from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -249,14 +250,15 @@ export default function TopNav({
                 {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
               <div className="f">
-                <div className="uwu-visible">
-                  <NextLink
-                    href="/"
-                    className={`active:scale-95 mt-0.5 overflow-hidden transition-transform relative items-center justify-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
-                    <img
+                <div className="uwu-visible flex items-center justify-center h-full">
+                  <NextLink href="/">
+                    <Image
                       alt="logo by @sawaratsuki1004"
                       title="logo by @sawaratsuki1004"
                       className="h-8"
+                      priority
+                      width={63}
+                      height={32}
                       src="/images/uwu.png"
                     />
                   </NextLink>

src/styles/index.css

@@ -745,11 +745,10 @@ ol.mdx-illustration-block {
   display: flex;
 }
 
-.uwu {
-  .uwu-visible {
-    display: flex;
-  }
-  .uwu-hidden {
-    display: none;
-  }
+.uwu .uwu-visible {
+  display: flex;
+}
+
+.uwu .uwu-hidden {
+  display: none;
 }