0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-05-18

概要

目次

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

zaassasasaasazz.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

randomSearchLoading = false の場合

image.png

コード部分

HomeSearch

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

その他

読み込みの素材

条件 (三項) 演算子

Udemy

githubコミット分

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?