Fix: スケルトンローダーの修正（#19）

components/header/dropdown.tsx

@@ -86,7 +86,7 @@ export default function Dropdawn(props) {
                     "block px-4 py-2 text-sm cursor-pointer"
                   )}
                   onClick={() => {
-                    router.push("/kiyaku");
+                    router.push("/tos");
                   }}
                 >
                   利用規約

components/header/sidebar.tsx

@@ -62,7 +62,7 @@ const Sidebar = ({ isOpen, avatar, name, id }) => {
                 閲覧履歴
               </a>
             </Link>
-            <Link href="/kiyaku">
+            <Link href="/tos">
               <a className="text-gray-600 font-semibold p-2">
                 利用規約
               </a>

pages/signup.tsx

@@ -178,7 +178,7 @@ const Signup = () => {
                           required
                         ></input>
                         <div className="ml-3 text-sm cursor-pointer">
-                          <Link href="/kiyaku">
+                          <Link href="/tos">
                             <a
                               href=""
                               className="text-sm font-medium text-sky-600 hover:underline"

pages/kiyaku.tsx → pages/tos.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import Header from "../components/header/header"
 
-const kiyaku = () => {
+const tos = () => {
     return (
         <div>
             <Header />
@@ -157,4 +157,4 @@ const kiyaku = () => {
     )
 }
 
-export default kiyaku
+export default tos

pages/users/[id].tsx

@@ -154,10 +154,23 @@ export default function App() {
     }, 1000)  
   }
 
-  if (!data)
+  if (!data){
     return (
       <div>
         <Header></Header>
+        <div className="relative w-screen h-64 sm:h-96 p-4 sm:p-8 pb-12">
+          <div className="w-full h-full">
+            <div className="w-full h-full mx-auto rounded-3xl animate-pulse bg-gray-200"></div>
+          </div>
+          <div className="flex flex-row items-end absolute bottom-[-15px] left-8 sm:left-36">
+            <div className="relative w-20 h-20 sm:w-24 sm:h-24 border-[3.5px]  border-white bg-gray-200 rounded-full">
+              <div className="rounded-full animate-pulse"></div>
+            </div>
+            <div className="flex flex-col mb-3 ml-5 font-semibold text-lg">
+              <div className="ml-2 rounded-full bg-gray-200 h-5 w-32"></div>
+            </div>
+          </div>
+        </div>
         <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-8">
             {Array.apply(0, Array(10)).map(function (x, i) {
@@ -167,6 +180,7 @@ export default function App() {
         </div>
       </div>
     );
+  }
 
   var images = data[0].images.slice(0, data[0].images.length);
   return (