Make modal loader instant.

davidjerleke · Jun 24, 2024 · 1a33a03 · 1a33a03
1 parent 9868214
commit 1a33a03
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 42 deletions.
diff --git a/packages/embla-carousel-docs/src/components/Modal/ModalLoading.tsx b/packages/embla-carousel-docs/src/components/Modal/ModalLoading.tsx
@@ -33,7 +33,7 @@ const ModalLoadingWrapper = styled.div<{ $opacity: number }>`
   align-items: center;
   justify-content: center;
   opacity: ${({ $opacity }) => $opacity};
-  transition: opacity 0.6s;
+  transition: ${({ $opacity }) => `opacity ${$opacity === 1 ? 0 : 0.6}s`};
 `
 
 export const ModalLoading = () => {

diff --git a/packages/embla-carousel-docs/src/components/Modal/ModalLoadingTrigger.tsx b/packages/embla-carousel-docs/src/components/Modal/ModalLoadingTrigger.tsx
@@ -1,17 +1,26 @@
 import { useEffect } from 'react'
 import { useAppDispatch } from 'hooks/useRedux'
-import { setModalIsLoading } from 'components/Modal/modalReducer'
+import { ModalsType } from 'consts/modal'
+import {
+  removeModalIsLoading,
+  setModalIsLoading
+} from 'components/Modal/modalReducer'
 
-export const ModalLoadingTrigger = () => {
+type PropType = {
+  modal: ModalsType
+}
+
+export const ModalLoadingTrigger = (props: PropType) => {
+  const { modal } = props
   const dispatch = useAppDispatch()
 
   useEffect(() => {
-    dispatch(setModalIsLoading(true))
+    dispatch(setModalIsLoading(modal))
 
     return () => {
-      dispatch(setModalIsLoading(false))
+      dispatch(removeModalIsLoading(modal))
     }
-  }, [dispatch])
+  }, [modal, dispatch])
 
   return null
 }
diff --git a/packages/embla-carousel-docs/src/components/Modal/modalReducer.ts b/packages/embla-carousel-docs/src/components/Modal/modalReducer.ts
@@ -3,37 +3,38 @@ import { ModalsType } from 'consts/modal'
 import { AppStateType } from 'consts/redux'
 
 export type ModalsStateType = {
-  isLoading: boolean
+  loadingModals: ModalsType[]
   openModals: ModalsType[]
 }
 
 const initialState: ModalsStateType = {
-  isLoading: false,
+  loadingModals: [],
   openModals: []
 }
 
 const modalsSlice = createSlice({
   name: 'modal',
   initialState,
   reducers: {
-    setModalIsLoading: (
-      state,
-      action: PayloadAction<ModalsStateType['isLoading']>
-    ): void => {
-      state.isLoading = action.payload
+    setModalIsLoading: (state, action: PayloadAction<ModalsType>): void => {
+      const modal = action.payload
+      if (state.loadingModals.includes(modal)) return
+      state.loadingModals = state.loadingModals.concat(action.payload)
+    },
+    removeModalIsLoading: (state, action: PayloadAction<ModalsType>): void => {
+      const modal = action.payload
+      if (!state.loadingModals.includes(modal)) return
+      state.loadingModals = state.loadingModals.filter((key) => key !== modal)
     },
     setModalOpen: (state, action: PayloadAction<ModalsType>): void => {
-      const modalToOpen = action.payload
-      if (state.openModals.includes(modalToOpen)) return
+      const modal = action.payload
+      if (state.openModals.includes(modal)) return
       state.openModals = state.openModals.concat(action.payload)
     },
     setModalClosed: (state, action: PayloadAction<ModalsType>): void => {
-      const modalToClose = action.payload
-      if (!state.openModals.includes(modalToClose)) return
-      state.openModals = state.openModals.filter((key) => key !== modalToClose)
-    },
-    setAllModalsClosed: (state): void => {
-      state.openModals = []
+      const modal = action.payload
+      if (!state.openModals.includes(modal)) return
+      state.openModals = state.openModals.filter((key) => key !== modal)
     }
   }
 })
@@ -43,13 +44,13 @@ export { name as modalName, reducer as modalReducer }
 
 export const {
   setModalIsLoading,
+  removeModalIsLoading,
   setModalOpen,
-  setModalClosed,
-  setAllModalsClosed
+  setModalClosed
 } = modalsSlice.actions
 
 export const selectModalLoading = (state: AppStateType): boolean =>
-  state.modal.isLoading
+  state.modal.loadingModals.length > 0
 
 export const selectIsModalOpen =
   (key: ModalsType) =>

diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxSelection.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxSelection.tsx
@@ -15,7 +15,6 @@ import { MODALS } from 'consts/modal'
 import uniqueId from 'lodash/uniqueId'
 import {
   selectIsModalOpen,
-  setAllModalsClosed,
   setModalClosed,
   setModalOpen
 } from 'components/Modal/modalReducer'
@@ -58,7 +57,6 @@ export const SandboxSelection = (props: PropType) => {
   const dispatch = useAppDispatch()
 
   const openModal = useCallback(() => {
-    dispatch(setAllModalsClosed())
     dispatch(setModalOpen(modalId.current))
   }, [dispatch])
 
@@ -102,7 +100,7 @@ export const SandboxSelection = (props: PropType) => {
       </SandboxSelectionOpenModalButton>
 
       {isOpen && (
-        <Suspense fallback={<ModalLoadingTrigger />}>
+        <Suspense fallback={<ModalLoadingTrigger modal={modalId.current} />}>
           <SandboxSelectionModalLazy
             sandboxes={sandboxes}
             closeModal={closeModal}

diff --git a/packages/embla-carousel-docs/src/components/Search/Search.tsx b/packages/embla-carousel-docs/src/components/Search/Search.tsx
@@ -5,7 +5,6 @@ import { useAppDispatch, useAppSelector } from 'hooks/useRedux'
 import { MODALS } from 'consts/modal'
 import {
   selectIsModalOpen,
-  setAllModalsClosed,
   setModalClosed,
   setModalOpen
 } from 'components/Modal/modalReducer'
@@ -22,10 +21,6 @@ export const Search = () => {
 
   const toggleSearch = useCallback(() => {
     const toggleModal = isSearchOpenRef.current ? setModalClosed : setModalOpen
-
-    if (toggleModal === setModalOpen) {
-      dispatch(setAllModalsClosed())
-    }
     dispatch(toggleModal(MODALS.SITE_SEARCH))
   }, [dispatch])
 
@@ -54,7 +49,7 @@ export const Search = () => {
             toggleSearch={toggleSearch}
             closeSearch={closeSearch}
           />
-          <ModalLoadingTrigger />
+          <ModalLoadingTrigger modal={MODALS.SITE_SEARCH} />
         </>
       }
     >

diff --git a/packages/embla-carousel-docs/src/components/Search/SearchAlgolia.tsx b/packages/embla-carousel-docs/src/components/Search/SearchAlgolia.tsx
@@ -22,7 +22,6 @@ import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
 import { isBrowser } from 'utils/isBrowser'
 import {
   selectIsModalOpen,
-  setAllModalsClosed,
   setModalClosed,
   setModalOpen
 } from 'components/Modal/modalReducer'
@@ -621,7 +620,6 @@ export const SearchAlgolia = () => {
   const dispatch = useAppDispatch()
 
   const openSearch = useCallback(() => {
-    dispatch(setAllModalsClosed())
     dispatch(setModalOpen(MODALS.SITE_SEARCH))
   }, [dispatch])
 

diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigation.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigation.tsx
@@ -110,7 +110,9 @@ export const SiteNavigation = (props: PropType) => {
         <SiteNavigationMenuDesktop />
 
         {isOpen && (
-          <Suspense fallback={<ModalLoadingTrigger />}>
+          <Suspense
+            fallback={<ModalLoadingTrigger modal={MODALS.SITE_NAVIGATION} />}
+          >
             <SiteNavigationMenuCompactLazy />
           </Suspense>
         )}

diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationToggle.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationToggle.tsx
@@ -11,7 +11,6 @@ import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 import { useEventListener } from 'hooks/useEventListener'
 import {
   selectIsModalOpen,
-  setAllModalsClosed,
   setModalClosed,
   setModalOpen
 } from 'components/Modal/modalReducer'
@@ -80,11 +79,6 @@ export const SiteNavigationToggle = () => {
 
   const onClick = useCallback(() => {
     const toggleModal = isOpen ? setModalClosed : setModalOpen
-
-    if (toggleModal === setModalOpen) {
-      dispatch(setAllModalsClosed())
-    }
-
     dispatch(toggleModal(MODALS.SITE_NAVIGATION))
   }, [dispatch, isOpen])