ローディング文言を追加する

toffyui commented 3 years ago

概要

ローディング中だとわかりにくいので文言を追加する

実装内容

ついでに余分なconsoleを削除
ローディングにフォントがあたってなかったのでフォントをあてました。
サーバーサイドでstyled-componentsがあたるようにbabelrcを調整
Loading→Wait a momentだけだと味気がないかなと思って、以下適当な文言を追加しました。

const LoadingTexts: string[] = [
  'Loading...',
  'Wait a moment...',
  'We are preparing now...',
  'Give us some seconds',
  'Sorry for waiting...',
  'Please keep waiting...',
  'Just some minutes, please',
  'You are almost there...',
]

初期値はLoadingなのはわかるのでWait a moment.を初期値にしてます。これをランダムで取得。ピクトグラムみたいに前回のものは表示しないようにしても良いですが、ローディング数秒なのでそこまでする必要もないかとやってないです。

useEffect内でisMountedを返したりしてるのは、setIntervalをuseEffectで使うとunmountのwarningがでるのでそれを防ぐためです。

さすがに1.5 * 5秒以内にはローディング終わるだろうということで7.5秒後にタイマーをとめます。

2秒間隔だと少し遅く感じました

画面確認

github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit 68edc90):

https://pictogram-san--pr41-feat-change-loading-8tcc9po7.web.app

_{(expires Tue, 10 Aug 2021 14:23:51 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

tommy19970714 commented 3 years ago

切り替わるのが少し早すぎませんか？

toffyui commented 3 years ago

ちょっと早くなったと思ったんですけど、変わってないですかね？今の状態でもデグれるわけではないので、このままマージします。

tommy19970714 / pictogram-san

ローディング文言を追加する #41

概要

実装内容

画面確認