Material-UIのCircularProgressを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

データの読み込み中、"読み込み中"という文言での表示から、CircularProgressへ変更します。CircularProgressは読み込み中を示すぐるぐるです。

"最近の更新"の読み込み表示の変更

src/components/dashboard/recentUpdatedTodos/index.js

import CircularProgress from '@material-ui/core/CircularProgress'  // 追加

const RecentUpdatedList = (todos) => {
  if (!isLoaded(todos)) {
    return <CircularProgress />  // 変更
  }
  // 略
}

実行結果です。青色(primary色)で読み込み中を表す円がぐるぐる回ります。

f:id:yucatio:20181201224146p:plain

タスク一覧の読み込み表示の変更

src/components/todos/TodoList.js

import CircularProgress from '@material-ui/core/CircularProgress'  // 追加

const TodoList = ({displayName, todos, isOwnTodos, onTodoClick}) => {
  if (!isLoaded(todos)) {
    return <CircularProgress />  // 変更
  }
  // 略
}

実行結果です。こちらも青色(primary色)で読み込み中を表す円がぐるぐる回ります。

f:id:yucatio:20181201224745p:plain

ログイン中表示の変更

ログイン中の表示は後々のためにinherit(親コンポーネントから継承)にします。

src/components/login/index.js

import CircularProgress from '@material-ui/core/CircularProgress'  // 追加

let Login = ({ auth, loginWithGoogle, logout }) => {
  if (!isLoaded(auth)) {
    return <CircularProgress color="inherit" />  // 変更
  }
  // 略
}