{errorMessage}
-diff --git a/package-lock.json b/package-lock.json
index ad6d43d..4b2923c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"react-markdown": "^9.0.1",
"react-router-dom": "^6.22.0",
"react-scripts": "^5.0.1",
+ "react-spinners": "^0.13.8",
"sass": "^1.70.0",
"web-vitals": "^2.1.4"
},
@@ -16082,6 +16083,15 @@
}
}
},
+ "node_modules/react-spinners": {
+ "version": "0.13.8",
+ "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+ "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index bbf5b7a..faabb17 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"react-markdown": "^9.0.1",
"react-router-dom": "^6.22.0",
"react-scripts": "^5.0.1",
+ "react-spinners": "^0.13.8",
"sass": "^1.70.0",
"web-vitals": "^2.1.4"
},
diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx
index a2a76c4..deb843e 100644
--- a/src/pages/Detail.jsx
+++ b/src/pages/Detail.jsx
@@ -2,6 +2,7 @@ import axios from 'axios';
import { useCookies } from 'react-cookie';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
import { url } from '../const';
import { Header } from '../components/Header';
import ReactMarkdown from 'react-markdown';
@@ -11,8 +12,10 @@ export const Detail = () => {
const params = useParams();
const [summary, setSummary] = useState([]);
const [errorMessage, setErrorMessage] = useState([]);
+ const [pageLoading, setPageLoading] = useState(false);
useEffect(() => {
+ setPageLoading(true);
axios
.get(`${url}/summaries`, {
headers: {
@@ -27,6 +30,9 @@ export const Detail = () => {
})
.catch((err) => {
setErrorMessage(`failed to get data. ${err}`);
+ })
+ .finally(() => {
+ setPageLoading(false);
});
}, []);
@@ -35,10 +41,16 @@ export const Detail = () => {
{errorMessage}
{errorMessage}
{errorMessage}
タイトル | -
---|
- {summary.title} - | - {summary.isMine && edit} -
タイトル | +
---|
+ {summary.title} + | + {summary.isMine && edit} +