google clone part7 20 Add body 5/5 APIのレスポンスを待っている間　ローディング画像を表示させる

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はAPIのレスポンスを待っている間　ローディング画像を表示させる処理を追加します。
以下gifアニメは実装後の様子です。

![zaassasasaasazz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/ee5ce4af-66a8-e06b-95fd-08e053675971.gif)

# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
新規state randomSearchLoadingを加えてます。
randomSearchLoadingの値によってI am Feeling Luckyボタンのcssを切り替えるよう実装します。

## randomSearchLoading = true の場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/5e59adae-7750-9fc8-cf5e-0be36b9af0fc.png)

## randomSearchLoading = false の場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4bea9481-09b1-f404-88f3-1c35bf6a1d3c.png)


# コード部分
## HomeSearch
```diff_jsx:HomeSearch.jsx
"use client"
import {AiOutlineSearch} from "react-icons/ai";
import {BsFillMicFill} from "react-icons/bs";
import { useRouter } from "next/navigation";
import { useState } from "react";


export default function HomeSearch() {  
    const router = useRouter();
    const[input, setInput] = useState("");
    const[randomSearchLoading,setRandomSearchLoading] = useState(false);

    function handleSubmit(e){
        e.preventDefault();
        if(!input.trim()) return;
        router.push(`/search/web?_searchTerm=${input}`);
    }

    async function randomSearch(){
+        setRandomSearchLoading(true);
        const response = await fetch("https://random-word-api.herokuapp.com/word")
            .then((res) => res.json())
            .then((data) => data[0]);
        if(!response) return;
        router.push(`/search/web?searchTerm=${response}`);
+        setRandomSearchLoading(false);
    }
    return (
    <>
        <form onSubmit={handleSubmit} className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl">
            <AiOutlineSearch className="text-xl text-gray-500 mr-3" />
            <input type="text" className="flex-grow focus:outline-none" onChange={(e) => setInput(e.target.value)} value={input}/>
            <BsFillMicFill className="text-lg"/>
        </form>

        <div className="flex flex-col space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:flex-row mt-8">
            <button onClick={handleSubmit}  className="btn">
                Google Search
            </button>

+            <button disabled={randomSearchLoading}  onClick={randomSearch} className="btn flex items-center justify-center disabled:opacity-80">
+                { randomSearchLoading ?(
+                <img src="spinner.svg" alt="loading..." className="h-6 text-center" />
+                ):(
+                "I am Feeling Lucky"
+                )}
            </button>
        </div>
    </>
  )
}
```




# 参考

## css




## その他
読み込みの素材

https://loading.io/

条件 (三項) 演算子

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator

Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/1636751671954ed379b6b1630fbd7fd838bac762