Skip to content
This repository has been archived by the owner on Jan 26, 2024. It is now read-only.

Refactoring capybara theme #594

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Refactoring capybara theme #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3273701
Refactored: the default layout to lazy hydrate and lazy load the comp…
ymaheshwari1 Mar 16, 2021
c03b193
Refactored: minimal layout to lazy-load and lazy-hydrate the footer
ymaheshwari1 Mar 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions layouts/Default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@
<OHeader />
<OMicrocart />
<slot />
<OFooter />
<OModal />
<ONotification />
<MCookieNotification />
<MOfflineBadge />
<OBottomNavigation />
<LazyHydrate when-visible>
<OFooter />
</LazyHydrate>
<LazyHydrate when-idle>
<OModal />
</LazyHydrate>
<LazyHydrate when-idle>
<ONotification />
</LazyHydrate>
<LazyHydrate when-idle>
<MCookieNotification />
</LazyHydrate>
<LazyHydrate when-idle>
<MOfflineBadge />
</LazyHydrate>
<LazyHydrate when-visible>
<OBottomNavigation />
</LazyHydrate>
</div>
<vue-progress-bar />
</div>
Expand All @@ -21,28 +33,25 @@ import { mapActions } from 'vuex';
import OHeader from 'theme/components/organisms/o-header';
import OMicrocart from 'theme/components/organisms/o-microcart';
import OFooter from 'theme/components/organisms/o-footer';
import OModal from 'theme/components/organisms/o-modal';
import OBottomNavigation from 'theme/components/organisms/o-bottom-navigation';
import MLoader from 'theme/components/molecules/m-loader';
import ONotification from 'theme/components/organisms/o-notification';
import MCookieNotification from 'theme/components/molecules/m-cookie-notification';
import MOfflineBadge from 'theme/components/molecules/m-offline-badge';
import { isServer } from '@vue-storefront/core/helpers';
import Head from 'theme/head';
import config from 'config';
import { ModalList } from 'theme/store/ui/modals'
import LazyHydrate from 'vue-lazy-hydration'

export default {
components: {
OHeader,
OMicrocart,
OFooter,
MLoader,
ONotification,
MCookieNotification,
MOfflineBadge,
OBottomNavigation,
OModal
ONotification: () => import('theme/components/organisms/o-notification'),
MCookieNotification: () => import('theme/components/molecules/m-cookie-notification'),
MOfflineBadge: () => import('theme/components/molecules/m-offline-badge'),
OBottomNavigation: () => import('theme/components/molecules/m-offline-badge'),
OModal: () => import('theme/components/organisms/o-modal'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are they lazy laded when they are not conditionally loaded?

Copy link
Contributor Author

@ymaheshwari1 ymaheshwari1 Apr 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Loading them lazily as using lazy-hydrate to render the components.

LazyHydrate
},
data () {
return {
Expand Down
9 changes: 6 additions & 3 deletions layouts/Minimal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@
<div id="viewport">
<OHeaderMinimal />
<slot />
<OFooter />
<LazyHydrate when-visible>
<OFooter />
</LazyHydrate>
</div>
</div>
</template>

<script>
import OHeaderMinimal from 'theme/components/organisms/o-header-minimal';
import OFooter from 'theme/components/organisms/o-footer';
import LazyHydrate from 'vue-lazy-hydration'

export default {
components: {
OHeaderMinimal,
OFooter
OFooter: () => import('theme/components/organisms/o-footer'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

LazyHydrate
}
}
</script>