gatsby-matrix-theme 53.11.0 → 53.11.2

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [53.11.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.11.1...v53.11.2) (2026-02-20)
+
+
+### Bug Fixes
+
+* enable load more ([6a0f7ba](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/6a0f7ba0b1d92f6a685726f0c8ada4d6960bb939))
+* remove enalbeLoadMore ([df78a91](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/df78a91926861c490ff07d3ca490f12c6594ee8d))
+* update cards template one with usememo ([41ccc88](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/41ccc8872a23f9d913f398e45fc8836ca06b04f5))
+
+
+### Config
+
+* update core theme ([cea05f7](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/cea05f7b22101a0a9571555ceba9af01bcac53de))
+
+
+* Merge branch 'en-54-add-load-more-button-to-cards' into 'master' ([913bcb1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/913bcb14317e810647f1bfda9d888e4c13b37bb1))
+
+## [53.11.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.11.0...v53.11.1) (2026-02-13)
+
+
+### Bug Fixes
+
+* fix inp for load more button and coupon copy code ([130fb65](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/130fb659c17b9c7486a4dfedfdbd9eef5aad31fa))
+
+
+* Merge branch 'EN-383' into 'master' ([853a764](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/853a764834dedef904e977c9eda38b00adae73c9))
+
 # [53.11.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.10.0...v53.11.0) (2026-02-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.11.0",
+  "version": "53.11.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.15.0",
+    "gatsby-core-theme": "44.15.1",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/coupon/coupon.module.scss

@@ -1,5 +1,6 @@
 .couponContainer {
   @include flex-align(center, center);
+
   width: fit-content;
 }
 
@@ -14,6 +15,7 @@
 
 .coupon {
   @include flex-align(center, center);
+
   border: 1px dashed #20cd77;
   background-color: #e9faf1;
   color: #262629;
@@ -26,6 +28,7 @@
   line-height: 1.7rem;
   letter-spacing: 0.44px;
   text-transform: uppercase;
+  z-index: 9;
 
   svg {
     width: 2.2rem;

package/src/components/atoms/coupon/index.js

@@ -20,7 +20,10 @@ const Coupon = ({
 
   const [copySuccess, setCopySuccess] = useState('');
 
-  const copyToClipBoard = async (copyMe) => {
+  const copyToClipBoard = async (e, copyMe) => {
+    e.preventDefault(); 
+    e.stopPropagation(); 
+
     try {
       await navigator.clipboard.writeText(copyMe);
       setCopySuccess(true);
@@ -41,7 +44,7 @@ const Coupon = ({
         <span className={styles.prefix}>{useTranslate(translationKey, defaultTranslation)}</span>
       )}
       <button
-        onClick={() => (code !== null && !inactive ? copyToClipBoard(code) : '')}
+        onClick={(e) => (code !== null && !inactive ? copyToClipBoard(e, code) : '')}
         type="button"
         className={`${styles.coupon} ${copySuccess ? styles.copied : ''} 
         ${code === null ? styles.noCode : ''}

package/src/components/organisms/cards/template-one/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { Suspense, useContext } from 'react';
+import React, { Suspense, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import useLoadMore from 'gatsby-core-theme/src/hooks/useLoadMore';
 import { Context } from '~context/MainProvider.js';
@@ -9,7 +9,6 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './cards.module.scss';
 import Card from '~atoms/cards/default-card';
 import Button from '~atoms/button/button';
-import keygen from '~helpers/keygen';
 
 const Cards = ({
   module,
@@ -22,10 +21,8 @@ const Cards = ({
   isArchiveModule = false,
   increment = limit,
 }) => {
-  const CustomCardComponent = getCard(
-    module?.model_type || module?.cards_page_type,
-    page?.template
-  );
+  const CustomCardComponent = useMemo(() => getCard(module?.model_type || module?.cards_page_type, page?.template), [module?.model_type, module?.cards_page_type, page?.template]);
+
   const { admin } = useContext(Context) || {};
   const loadMoreData = useLoadMore({
     items: module.items,
@@ -47,12 +44,15 @@ const Cards = ({
         {moduleItems &&
           moduleItems.map((item, index) =>
             CustomCardComponent ? (
-              <Suspense key={keygen()} fallback={<></>}>
+              <Suspense
+                key={item.id}
+                fallback={<></>}
+              >
                 {admin ? (
                   <div className={styles.container}>
                     <AdminButton item={item} />
                     <CustomCardComponent
-                      key={keygen()}
+                      key={item.id}
                       featured={module.style === 'featured'}
                       item={item}
                       type={item.type}
@@ -65,7 +65,7 @@ const Cards = ({
                   </div>
                 ) : (
                   <CustomCardComponent
-                    key={keygen()}
+                    key={item.id}
                     featured={module.style === 'featured'}
                     item={item}
                     type={item.type}
@@ -79,7 +79,7 @@ const Cards = ({
               </Suspense>
             ) : (
               <Card
-                key={keygen()}
+                key={item.id}
                 item={item}
                 modulePosition={modulePosition}
                 itemPosition={index + 1}

package/src/gatsby-core-theme/components/organisms/toplist/list/index.js

@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
-import React, { useRef } from 'react';
+import React, { useRef, useState, useCallback, startTransition } from 'react';
 import PropTypes from 'prop-types';
 
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import keygen from '~helpers/keygen';
 import Button from '~atoms/button/button';
 import Row from '../../../../../components/molecules/toplist/row/variant-one';
 import VerifiedAuthor from '../../../../../images/icons/verified-author';
@@ -44,25 +43,22 @@ export default function List({
   if ((!hasLoadMoreButton || parseInt(hasLoadMoreButton) === 0) && parseInt(initItemsCount) > 0) {
     items = items && items.splice(0, initItemsCount);
   }
-
-  const loadMoreBtn = useRef(React.createRef());
+  
+  const [visibleCount, setVisibleCount] = useState(initLoadItems);
 
   const showLoadMoreButton =
     hasLoadMoreButton === '1' && Number(initItemsCount) < toplist.items?.length;
 
-  function handleClick() {
-    const displayed = elRefs.current.filter((item) => item.classList.contains(styles.show)).length;
-
-    const nextItem = loadingItems + displayed;
-    const lastItem =
-      nextItem > elRefs.current.length ? elRefs.current.length + 1 : displayed + loadingItems;
+  const allItemsVisible = items && visibleCount >= items.length;
 
-    elRefs.current.slice(displayed, lastItem).forEach((item) => item.classList.toggle(styles.show));
-
-    if (loadingItems + displayed >= elRefs.current.length) {
-      loadMoreBtn.current.classList.toggle(styles.hide);
-    }
-  }
+  const handleClick = useCallback(() => {
+    startTransition(() => {
+      setVisibleCount((prev) => {
+        const next = prev + loadingItems;
+        return items && next >= items.length ? items.length : next;
+      });
+    });
+  }, [loadingItems, items]);
 
   const templateStyle = () => {
     switch (modulestyle) {
@@ -79,7 +75,7 @@ export default function List({
 
   return (
     <>
-      <ol className={`${styles.list || ''} ${templateStyle()} `} key={keygen()}>
+      <ol className={`${styles.list || ''} ${templateStyle()} `}>
         {items && items.map((item, index) => (
           <Row
             pagePath={pagePath}
@@ -89,8 +85,8 @@ export default function List({
             oneliner={toplist.one_liner}
             isPPC={isPPCPage}
             index={index}
-            className={index + 1 <= initLoadItems ? styles.show : null}
-            key={keygen()}
+            className={index < visibleCount ? styles.show : null}
+            key={item.id || item.name || index}
             itemRefs={elRefs}
             template={template}
             layout={isGrid ? 'grid' : 'list'}
@@ -101,12 +97,12 @@ export default function List({
           />
         ))}
       </ol>
-      {showLoadMoreButton && (
-        <div ref={loadMoreBtn} className={styles.loadMore}>
+      {showLoadMoreButton && !allItemsVisible && (
+        <div className={styles.loadMore}>
           <Button
             isInternalLink={false}
             btnText={useTranslate('load_more', 'Load More')}
-            onClick={() => handleClick()}
+            onClick={handleClick}
             buttonType="tertiary"
             icon={loadMoreIcon}
             tag="button"