reactstrapのModalコンポーネントでなぜかモーダルが表示されなかった時

今回React案件なのですが、その中でreactstrapのModalを使う機会が多くありました。

例えばエラーモーダルとかローディングモーダルとかですね。

その中でローディングモーダルがなぜか表示される時とされない時があってなんでだろ...って思っていたのですが意外とハマったので共有します。

まず流れとしては

1. 非同期でデータ取得
2. 取得開始時にstoreのloadingFlg=true
3. 取得・初期処理終了後にstoreのloadingFlg=false

というよくある流れです。

で、一回目の取得時には特に問題なくモーダルが表示されるのですが二回目以降になると表示されなくなるんですよね。

なんでだろうなあとめちゃくちゃデバッグしてたのですが、非同期でstoreのstateを変える処理は特に問題なさそう。

じゃあModalコンポーネントに問題あるのかな、と思って確認したところどうやら「fade」がこの現象の元凶みたいでした。

<Modal isOpen={isLoading} className={className}>
      <ModalBody>
        <div className="pt-1 text-center">
          <div className="sk-three-bounce">
            <div className="sk-child sk-bounce1"></div>
            <div className="sk-child sk-bounce2"></div>
            <div className="sk-child sk-bounce3"></div>
          </div>
          <p>データを読み込んでいます...</p>
        </div>
      </ModalBody>
    </Modal>

上記を下記のように変更したらこの現象は解決しました。

<Modal isOpen={isLoading} className={className} fade={false}>
      <ModalBody>
        <div className="pt-1 text-center">
          <div className="sk-three-bounce">
            <div className="sk-child sk-bounce1"></div>
            <div className="sk-child sk-bounce2"></div>
            <div className="sk-child sk-bounce3"></div>
          </div>
          <p>データを読み込んでいます...</p>
        </div>
      </ModalBody>
    </Modal>

モーダルのタイムアウトが問題なのかな?(デフォルトでは300ms)と思ったのですが、100msとかにしてもダメだったのでfade自体がアカンみたい。

結局次フェーズに持ち越した項目でしたがとりあえず解決できてよかった..