反映 - 縦幅を親要素準拠指定にしつつ、ローディングUIを中央より少し上に設定し、画面中央寄りに表示

[OKAUEND]

Issue / Ticket

作業カテゴリー

作業チケット

2ページ目などのローディングを画面中央にする

課題/何が起こったか

2ページ目へのローディング中に、ローディングのUIがヘッダー近くに表示され、画面中央じゃないのに違和感を感じる

仮説/どうしてそうなったのか

親の要素で、heigthプロパティが指定されておらず、ローディング要素分でしか幅がないため、画面上に表示されている

どういう作業を行ったか

最も上位にある要素のスタイルに対して、heightプロパティを100%に設定し、親の要素を継承する Next.jsのローディングファイルの要素に対して、divで囲いそれにスタイルをつけheightプロパティを設定 ただし、100%にしてしまうと中央より下側に表示され違和感を感じるため、親に対して80%ほどを指定

Next Point

• ローディングUIのデザインが変わったら、ポジションの変更を行うひつようはある

変更画面のサンプル

変更前

変更後

参考資料

• none