From c695d8c777baa330b8b9c285fd5454c5f9765b2b Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Tue, 5 May 2026 10:04:37 +0300
Subject: [PATCH 1/6] SkeletonLoader card testing

Add working skeletonLoader with small issues
---
 .../ui/NewsElementPage/ui/NewsElementPage.tsx |  31 ++++-
 .../preparedPages/NewsPages/ui/NewsPage.tsx   |   7 +-
 .../ui/SkeletonLoader.module.scss             | 115 ++++++++++++++++++
 .../ui/SkeletonLoader/ui/SkeletonLoader.tsx   |  36 ++++++
 4 files changed, 181 insertions(+), 8 deletions(-)

diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
index a7e884914..e766d2584 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
@@ -19,6 +19,10 @@ import { linkify } from '@/shared/ui/v2/Chatbot/utils/linkify';
 import { useClientTranslation } from '@/shared/i18n';
 import { NewsCard } from '@/widgets/NewsCard';
 import { ShareButton } from '@/shared/ui/v2/ShareButton';
+import {
+    SkeletonLoaderForNewsElementPage,
+    SkeletonLoaderForNewsPage,
+} from '@/shared/ui/SkeletonLoader/ui/SkeletonLoader';
 
 type HeroImageProps = {
     picture?: string;
@@ -59,18 +63,35 @@ const NewsElementPage = () => {
     const lng = params.lng as string;
 
     const { t } = useClientTranslation('news');
-    const { data: moreNews } = useGetNewsQuery({ limit: 2 });
-    const { data, isLoading } = useGetNewsByIdQuery(id as string);
+    const { data: moreNews, isLoading: isMoreNewsLoading } = useGetNewsQuery({ limit: 2 });
+    const { data, isLoading: isNewsLoading } = useGetNewsByIdQuery(id as string);
     const directusBaseUrl = envHelper.directusHost;
     const router = useRouter();
-    const lngCode = lng === 'en' ? 'en-US' : lng === 'fi' ? 'fi-FI' : lng;
+
+    const pageIsLoading = isNewsLoading || isMoreNewsLoading || !data || !moreNews;
+
+    const getLngCode = (lng: string) => {
+        if (lng === 'en') return 'en-US';
+        if (lng === 'fi') return 'fi-FI';
+        return lng;
+    };
+
+    const lngCode = getLngCode(lng);
 
     const handleNextNews = (newsId: string) => {
         if (newsId) router.push(`/news/${newsId}`);
     };
 
-    if (isLoading || !data) {
-        return <div>Loading...</div>;
+    if (pageIsLoading) {
+        return (
+            <Container>
+                <div className={classNames(cls.NewsElementPage)}>
+                    <SkeletonLoaderForNewsElementPage />
+                </div>
+
+                <SkeletonLoaderForNewsPage numberOfCards={2} />
+            </Container>
+        );
     }
 
     const post = formatNewsSingle(data, lngCode || 'fi-FI');
diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
index 13ea82efa..9380f3560 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { News } from '@/entities/NewsV2/model/types/types';
 import { useClientTranslation } from '@/shared/i18n';
 import { PageTitle } from '@/shared/ui/PageTitle';
+import { SkeletonLoaderForNewsPage } from '@/shared/ui/SkeletonLoader/ui/SkeletonLoader';
 
 const NewsPage = () => {
     // later use this to fetch data from the backend
@@ -22,8 +23,8 @@ const NewsPage = () => {
     const currentSlug = typeof params.slug === 'string' ? params.slug : undefined;
     const lngCode = lng === 'en' ? 'en-US' : lng === 'fi' ? 'fi-FI' : lng;
     const directusBaseUrl = envHelper.directusHost;
-
-    const limit = 6;
+    //limit for initial load(no news data fetched yet)
+    const limit = 12;
     const [currentPage, setCurrentPage] = useState(1);
     const [allNews, setAllNews] = useState<News[]>([]);
     const [hasMoreNewsState, setHasMoreNewsState] = useState<boolean>(false);
@@ -113,7 +114,7 @@ const NewsPage = () => {
                     })}
                     {hasMoreNewsState && <div ref={observeElementRef} />}
                 </div>
-                <div>{isLoading && 'Loading...'}</div>
+                {isLoading && <SkeletonLoaderForNewsPage numberOfCards={limit} />}
                 {renderNoMoreNews()}
             </Container>
         </main>
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
index 75a5ad5bd..cb28b88b5 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
@@ -151,3 +151,118 @@
     width: 100%;
     margin-bottom: 8px;
 }
+
+/* Skeleton News */
+.newsSkeletonGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px;
+    width: 100%;
+}
+
+.newsSkeletonCard {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.newsSkeletonImage {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsSkeletonDate {
+    width: 35%;
+    height: 14px;
+    border-radius: 6px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsSkeletonTitle {
+    width: 85%;
+    height: 24px;
+    border-radius: 6px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsSkeletonText,
+.newsSkeletonTextShort {
+    height: 16px;
+    border-radius: 6px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsSkeletonText {
+    width: 100%;
+}
+
+.newsSkeletonTextShort {
+    width: 70%;
+}
+
+.newsElementSkeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    width: 100%;
+}
+
+.newsElementSkeletonTitle {
+    width: 70%;
+    height: 40px;
+    border-radius: 8px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsElementSkeletonDate {
+    width: 160px;
+    height: 16px;
+    border-radius: 6px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsElementSkeletonImage {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 16px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsElementSkeletonText,
+.newsElementSkeletonTextShort {
+    height: 18px;
+    border-radius: 6px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+
+.newsElementSkeletonText {
+    width: 100%;
+}
+
+.newsElementSkeletonTextShort {
+    width: 60%;
+}
+
+@keyframes skeletonPulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.45;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
index bb051acb8..9ab44a1d9 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
@@ -181,3 +181,39 @@ export const SkeletonLoaderWithHeader = ({ sections = 1, className = '' }: Skele
         </div>
     );
 };
+export const SkeletonLoaderForNewsPage = ({
+    numberOfCards = 6,
+    className = '',
+}: SkeletonLoaderProps) => {
+    const cards = Array(numberOfCards).fill(0);
+
+    return (
+        <div className={classNames(cls.newsSkeletonGrid, {}, [className])}>
+            {cards.map((_, index) => (
+                <div
+                    key={index}
+                    className={cls.newsSkeletonCard}
+                >
+                    <div className={cls.newsSkeletonImage} />
+                    <div className={cls.newsSkeletonDate} />
+                    <div className={cls.newsSkeletonTitle} />
+                    <div className={cls.newsSkeletonText} />
+                    <div className={cls.newsSkeletonTextShort} />
+                </div>
+            ))}
+        </div>
+    );
+};
+export const SkeletonLoaderForNewsElementPage = ({ className = '' }: SkeletonLoaderProps) => {
+    return (
+        <div className={classNames(cls.newsElementSkeleton, {}, [className])}>
+            <div className={cls.newsElementSkeletonTitle} />
+            <div className={cls.newsElementSkeletonDate} />
+            <div className={cls.newsElementSkeletonImage} />
+            <div className={cls.newsElementSkeletonText} />
+            <div className={cls.newsElementSkeletonText} />
+            <div className={cls.newsElementSkeletonText} />
+            <div className={cls.newsElementSkeletonTextShort} />
+        </div>
+    );
+};

From 4cb04c4b4109f72a3452ae61cf851f7cf30b85d5 Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Tue, 5 May 2026 13:16:00 +0300
Subject: [PATCH 2/6] Final SkeletonLoader

-Added same layout as in NewsCard for loader
-Made them appear responsively
---
 .../preparedPages/NewsPages/ui/NewsPage.tsx   |   6 +-
 .../ui/SkeletonLoader.module.scss             | 131 +++++++++---------
 .../ui/SkeletonLoader/ui/SkeletonLoader.tsx   |  18 ++-
 3 files changed, 83 insertions(+), 72 deletions(-)

diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
index 9380f3560..63ddca91d 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
@@ -112,9 +112,11 @@ const NewsPage = () => {
                             />
                         );
                     })}
-                    {hasMoreNewsState && <div ref={observeElementRef} />}
+
+                    {isLoading && <SkeletonLoaderForNewsPage numberOfCards={limit} />}
+
+                    {hasMoreNewsState && !isLoading && <div ref={observeElementRef} />}
                 </div>
-                {isLoading && <SkeletonLoaderForNewsPage numberOfCards={limit} />}
                 {renderNoMoreNews()}
             </Container>
         </main>
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
index cb28b88b5..a807c7faa 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
@@ -153,33 +153,73 @@
 }
 
 /* Skeleton News */
-.newsSkeletonGrid {
+.newsSkeletonCard {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 24px;
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--base-card-background);
+    border: 3px solid var(--drop-shadows);
+    border-radius: var(--border-radius-figmadesktop);
+    filter: drop-shadow(8px 12px var(--drop-shadows));
+    height: 150px;
     width: 100%;
+    max-width: 780px;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+
+    @media (max-width: breakpoint(xl)) {
+        max-width: 500px;
+    }
+
+    @media (max-width: breakpoint(md)) {
+        height: 130px;
+        width: 70%;
+    }
+
+    @media (max-width: breakpoint(sm)) {
+        height: 120px;
+        width: 80%;
+    }
+
+    @media (max-width: breakpoint(xs)),
+    (max-width: 320px) {
+        height: 110px;
+        width: 70%;
+        margin: auto 0;
+    }
+
+    @media (max-width: 320px) {
+        width: 60%;
+    }
 }
 
-.newsSkeletonCard {
+.newsSkeletonContent {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0.5rem 50% 0 0.5rem;
+    overflow: hidden;
+    position: relative;
+    z-index: 2;
 }
 
 .newsSkeletonImage {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    border-radius: 12px;
-    background: var(--skeleton-color, #e5e5e5);
-    animation: skeletonPulse 1.5s infinite ease-in-out;
-}
-
-.newsSkeletonDate {
-    width: 35%;
-    height: 14px;
-    border-radius: 6px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 70%;
+    height: 100%;
     background: var(--skeleton-color, #e5e5e5);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 -22%);
+    transform: translateX(39%);
     animation: skeletonPulse 1.5s infinite ease-in-out;
+    @media (max-width: breakpoint(xs)) {
+        width: 90%;
+        transform: translateX(35%);
+    }
 }
 
 .newsSkeletonTitle {
@@ -190,69 +230,34 @@
     animation: skeletonPulse 1.5s infinite ease-in-out;
 }
 
-.newsSkeletonText,
-.newsSkeletonTextShort {
-    height: 16px;
+.newsSkeletonText {
+    width: 245px;
+    height: 14px;
+    margin-top: auto;
     border-radius: 6px;
     background: var(--skeleton-color, #e5e5e5);
     animation: skeletonPulse 1.5s infinite ease-in-out;
 }
 
-.newsSkeletonText {
-    width: 100%;
-}
-
 .newsSkeletonTextShort {
-    width: 70%;
-}
-
-.newsElementSkeleton {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    width: 100%;
-}
-
-.newsElementSkeletonTitle {
-    width: 70%;
-    height: 40px;
-    border-radius: 8px;
-    background: var(--skeleton-color, #e5e5e5);
-    animation: skeletonPulse 1.5s infinite ease-in-out;
-}
-
-.newsElementSkeletonDate {
-    width: 160px;
-    height: 16px;
+    width: 245px;
+    height: 14px;
     border-radius: 6px;
+    margin-top: 10px;
     background: var(--skeleton-color, #e5e5e5);
     animation: skeletonPulse 1.5s infinite ease-in-out;
 }
 
-.newsElementSkeletonImage {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    border-radius: 16px;
-    background: var(--skeleton-color, #e5e5e5);
-    animation: skeletonPulse 1.5s infinite ease-in-out;
-}
-
-.newsElementSkeletonText,
-.newsElementSkeletonTextShort {
-    height: 18px;
+.newsSkeletonDate {
+    width: 80px;
+    height: 14px;
+    margin-top: auto;
+    margin-bottom: 5px;
     border-radius: 6px;
     background: var(--skeleton-color, #e5e5e5);
     animation: skeletonPulse 1.5s infinite ease-in-out;
 }
 
-.newsElementSkeletonText {
-    width: 100%;
-}
-
-.newsElementSkeletonTextShort {
-    width: 60%;
-}
-
 @keyframes skeletonPulse {
     0% {
         opacity: 1;
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
index 9ab44a1d9..ffcd2daca 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
@@ -188,22 +188,26 @@ export const SkeletonLoaderForNewsPage = ({
     const cards = Array(numberOfCards).fill(0);
 
     return (
-        <div className={classNames(cls.newsSkeletonGrid, {}, [className])}>
+        <>
             {cards.map((_, index) => (
                 <div
                     key={index}
-                    className={cls.newsSkeletonCard}
+                    className={classNames(cls.newsSkeletonCard, {}, [className])}
                 >
+                    <div className={cls.newsSkeletonContent}>
+                        <div className={cls.newsSkeletonTitle} />
+                        <div className={cls.newsSkeletonText} />
+                        <div className={cls.newsSkeletonTextShort} />
+                        <div className={cls.newsSkeletonDate} />
+                    </div>
+
                     <div className={cls.newsSkeletonImage} />
-                    <div className={cls.newsSkeletonDate} />
-                    <div className={cls.newsSkeletonTitle} />
-                    <div className={cls.newsSkeletonText} />
-                    <div className={cls.newsSkeletonTextShort} />
                 </div>
             ))}
-        </div>
+        </>
     );
 };
+
 export const SkeletonLoaderForNewsElementPage = ({ className = '' }: SkeletonLoaderProps) => {
     return (
         <div className={classNames(cls.newsElementSkeleton, {}, [className])}>

From 610849819cd5310bfd22eb1dadf10de48d813736 Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Tue, 5 May 2026 14:47:11 +0300
Subject: [PATCH 3/6] Update SkeletonLoader.tsx

-Added documentation for News Skeletonloader
---
 .../ui/SkeletonLoader/ui/SkeletonLoader.tsx     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
index ffcd2daca..ebb848714 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
@@ -181,8 +181,18 @@ export const SkeletonLoaderWithHeader = ({ sections = 1, className = '' }: Skele
         </div>
     );
 };
+
+/**
+ * Renders skeleton cards for the news listing page.
+ * Used while news data is loading to preserve layout and improve UX.
+ *
+ * @param {Object} props - Component props
+ * @param {number} [props.numberOfCards=12] - Number of skeleton cards to render
+ * @param {string} [props.className] - Optional additional CSS classes
+ * @returns {JSX.Element} List of skeleton news cards
+ */
 export const SkeletonLoaderForNewsPage = ({
-    numberOfCards = 6,
+    numberOfCards = 12,
     className = '',
 }: SkeletonLoaderProps) => {
     const cards = Array(numberOfCards).fill(0);
@@ -208,6 +218,11 @@ export const SkeletonLoaderForNewsPage = ({
     );
 };
 
+/**
+ * Renders a skeleton layout for a single news article page
+ * while the article content is loading.
+ */
+
 export const SkeletonLoaderForNewsElementPage = ({ className = '' }: SkeletonLoaderProps) => {
     return (
         <div className={classNames(cls.newsElementSkeleton, {}, [className])}>

From e8e503cb7ffb011d43ffdd2e7ae858f65a0ccbe8 Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Thu, 7 May 2026 10:44:50 +0300
Subject: [PATCH 4/6] Added skeletonLoader for newselementpage, shorter version

---
 .../ui/NewsElementPage/ui/NewsElementPage.tsx |  41 +++++-
 .../ui/SkeletonLoader.module.scss             | 126 ++++++++++++++++++
 .../ui/SkeletonLoader/ui/SkeletonLoader.tsx   |  33 ++++-
 3 files changed, 193 insertions(+), 7 deletions(-)

diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
index e766d2584..7c706d367 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
@@ -22,6 +22,7 @@ import { ShareButton } from '@/shared/ui/v2/ShareButton';
 import {
     SkeletonLoaderForNewsElementPage,
     SkeletonLoaderForNewsPage,
+    SkeletonLoaderForReadMoreTitle,
 } from '@/shared/ui/SkeletonLoader/ui/SkeletonLoader';
 
 type HeroImageProps = {
@@ -85,11 +86,49 @@ const NewsElementPage = () => {
     if (pageIsLoading) {
         return (
             <Container>
+                <div className={cls.navButtons}>
+                    <Button
+                        disabled
+                        theme={ButtonTheme.PRIMARY}
+                        size={ButtonSize.M}
+                        className={classNames(cls.ButtonNewsNavigation)}
+                    >
+                        <Image
+                            loading="eager"
+                            alt="Pin"
+                            src={chevronleft}
+                            className={cls.buttonImage}
+                        />
+                        {t('previous-button')}
+                    </Button>
+
+                    <Button
+                        disabled
+                        theme={ButtonTheme.PRIMARY}
+                        size={ButtonSize.M}
+                        className={classNames(cls.ButtonNewsNavigation)}
+                    >
+                        {t('next-button')}
+                        <Image
+                            loading="eager"
+                            alt="Pin"
+                            src={chevronright}
+                            className={cls.buttonImage}
+                        />
+                    </Button>
+                </div>
+
                 <div className={classNames(cls.NewsElementPage)}>
                     <SkeletonLoaderForNewsElementPage />
                 </div>
 
-                <SkeletonLoaderForNewsPage numberOfCards={2} />
+                <div className={cls.readmoreText}>
+                    <SkeletonLoaderForReadMoreTitle />
+                </div>
+
+                <div className={cls.newsGrid}>
+                    <SkeletonLoaderForNewsPage numberOfCards={2} />
+                </div>
             </Container>
         );
     }
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
index a807c7faa..1c9c8b258 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
@@ -271,3 +271,129 @@
         opacity: 1;
     }
 }
+/* Skeleton News Element Page */
+.newsElementSkeleton {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+    padding-bottom: 2rem;
+}
+
+.newsElementSkeletonHero {
+    width: 100%;
+    height: 330px;
+    margin-bottom: 0.5rem;
+    border-radius: 4px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+
+    @media (max-width: breakpoint(md)) {
+        height: 250px;
+    }
+
+    @media (max-width: breakpoint(sm)) {
+        height: 190px;
+    }
+}
+
+.newsElementSkeletonTitle {
+    width: 38%;
+    height: 48px;
+    margin: 0 auto 24px;
+    border-radius: 8px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+
+    @media (max-width: breakpoint(sm)) {
+        width: 70%;
+        height: 40px;
+    }
+}
+
+.newsElementSkeletonSubtitle {
+    width: 55%;
+    height: 30px;
+    margin: 0 auto 24px;
+    border-radius: 8px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+
+    @media (max-width: breakpoint(sm)) {
+        width: 85%;
+        height: 26px;
+    }
+}
+
+.newsElementSkeletonMeta {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 1rem;
+
+    div {
+        width: 100px;
+        height: 18px;
+        border-radius: 6px;
+        background: var(--skeleton-color, #e5e5e5);
+        animation: skeletonPulse 1.5s infinite ease-in-out;
+    }
+}
+
+.newsElementSkeletonBody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 1rem;
+
+    div {
+        width: 70%;
+        height: 20px;
+        border-radius: 6px;
+        background: var(--skeleton-color, #e5e5e5);
+        animation: skeletonPulse 1.5s infinite ease-in-out;
+    }
+
+    .short {
+        width: 55%;
+    }
+
+    @media (max-width: breakpoint(sm)) {
+        div {
+            width: 100%;
+        }
+
+        .short {
+            width: 75%;
+        }
+    }
+}
+
+.newsElementSkeletonShare {
+    width: 90px;
+    height: 24px;
+    margin: 0 auto;
+    border-radius: 8px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
+.readMoreSkeletonContainer {
+    width: 100%;
+}
+
+.readMoreSkeletonWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.readMoreSkeletonTitle {
+    width: 220px;
+    height: 48px;
+    margin-left: 16px;
+    border-radius: 8px;
+    background: var(--skeleton-color, #e5e5e5);
+    animation: skeletonPulse 1.5s infinite ease-in-out;
+}
\ No newline at end of file
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
index ebb848714..7191f771f 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
@@ -226,13 +226,34 @@ export const SkeletonLoaderForNewsPage = ({
 export const SkeletonLoaderForNewsElementPage = ({ className = '' }: SkeletonLoaderProps) => {
     return (
         <div className={classNames(cls.newsElementSkeleton, {}, [className])}>
+            <div className={cls.newsElementSkeletonHero} />
+
             <div className={cls.newsElementSkeletonTitle} />
-            <div className={cls.newsElementSkeletonDate} />
-            <div className={cls.newsElementSkeletonImage} />
-            <div className={cls.newsElementSkeletonText} />
-            <div className={cls.newsElementSkeletonText} />
-            <div className={cls.newsElementSkeletonText} />
-            <div className={cls.newsElementSkeletonTextShort} />
+            <div className={cls.newsElementSkeletonSubtitle} />
+
+            <div className={cls.newsElementSkeletonMeta}>
+                <div />
+                <div />
+            </div>
+
+            <div className={cls.newsElementSkeletonBody}>
+                <div />
+                <div />
+                <div />
+                <div />
+                <div className={cls.short} />
+            </div>
+
+            <div className={cls.newsElementSkeletonShare} />
+        </div>
+    );
+};
+export const SkeletonLoaderForReadMoreTitle = () => {
+    return (
+        <div className={cls.readMoreSkeletonContainer}>
+            <div className={cls.readMoreSkeletonWrapper}>
+                <div className={cls.readMoreSkeletonTitle} />
+            </div>
         </div>
     );
 };

From 5ec819599811cdfedf0624ce431e09228e3c235f Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Thu, 7 May 2026 11:06:22 +0300
Subject: [PATCH 5/6] SkeletonLoader for NewsElementPage

Made some fixes, so skeletonloader fits newselement better.
---
 .../ui/NewsElementPage/ui/NewsElementPage.tsx | 14 +------
 .../ui/SkeletonLoader.module.scss             | 40 +++----------------
 .../ui/SkeletonLoader/ui/SkeletonLoader.tsx   | 15 ++-----
 3 files changed, 10 insertions(+), 59 deletions(-)

diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
index 7c706d367..94dabc3b3 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsElementPage/ui/NewsElementPage.tsx
@@ -19,11 +19,7 @@ import { linkify } from '@/shared/ui/v2/Chatbot/utils/linkify';
 import { useClientTranslation } from '@/shared/i18n';
 import { NewsCard } from '@/widgets/NewsCard';
 import { ShareButton } from '@/shared/ui/v2/ShareButton';
-import {
-    SkeletonLoaderForNewsElementPage,
-    SkeletonLoaderForNewsPage,
-    SkeletonLoaderForReadMoreTitle,
-} from '@/shared/ui/SkeletonLoader/ui/SkeletonLoader';
+import { SkeletonLoaderForNewsElementPage } from '@/shared/ui/SkeletonLoader/ui/SkeletonLoader';
 
 type HeroImageProps = {
     picture?: string;
@@ -121,14 +117,6 @@ const NewsElementPage = () => {
                 <div className={classNames(cls.NewsElementPage)}>
                     <SkeletonLoaderForNewsElementPage />
                 </div>
-
-                <div className={cls.readmoreText}>
-                    <SkeletonLoaderForReadMoreTitle />
-                </div>
-
-                <div className={cls.newsGrid}>
-                    <SkeletonLoaderForNewsPage numberOfCards={2} />
-                </div>
             </Container>
         );
     }
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
index 1c9c8b258..cd55762a7 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.module.scss
@@ -210,6 +210,7 @@
     position: absolute;
     right: 0;
     top: 0;
+    bottom: -50px;
     width: 70%;
     height: 100%;
     background: var(--skeleton-color, #e5e5e5);
@@ -277,12 +278,12 @@
     display: flex;
     flex-direction: column;
     row-gap: 1rem;
-    padding-bottom: 2rem;
+    padding-bottom: 10rem;
 }
 
 .newsElementSkeletonHero {
     width: 100%;
-    height: 330px;
+    height: 355px;
     margin-bottom: 0.5rem;
     border-radius: 4px;
     background: var(--skeleton-color, #e5e5e5);
@@ -298,7 +299,7 @@
 }
 
 .newsElementSkeletonTitle {
-    width: 38%;
+    width: 90%;
     height: 48px;
     margin: 0 auto 24px;
     border-radius: 8px;
@@ -312,7 +313,7 @@
 }
 
 .newsElementSkeletonSubtitle {
-    width: 55%;
+    width: 90%;
     height: 30px;
     margin: 0 auto 24px;
     border-radius: 8px;
@@ -328,7 +329,6 @@
 .newsElementSkeletonMeta {
     display: flex;
     justify-content: center;
-    gap: 24px;
     margin-bottom: 1rem;
 
     div {
@@ -348,7 +348,7 @@
     margin-bottom: 1rem;
 
     div {
-        width: 70%;
+        width: 85%;
         height: 20px;
         border-radius: 6px;
         background: var(--skeleton-color, #e5e5e5);
@@ -369,31 +369,3 @@
         }
     }
 }
-
-.newsElementSkeletonShare {
-    width: 90px;
-    height: 24px;
-    margin: 0 auto;
-    border-radius: 8px;
-    background: var(--skeleton-color, #e5e5e5);
-    animation: skeletonPulse 1.5s infinite ease-in-out;
-}
-.readMoreSkeletonContainer {
-    width: 100%;
-}
-
-.readMoreSkeletonWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-}
-
-.readMoreSkeletonTitle {
-    width: 220px;
-    height: 48px;
-    margin-left: 16px;
-    border-radius: 8px;
-    background: var(--skeleton-color, #e5e5e5);
-    animation: skeletonPulse 1.5s infinite ease-in-out;
-}
\ No newline at end of file
diff --git a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
index 7191f771f..7ac18276f 100644
--- a/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
+++ b/frontend-next-migration/src/shared/ui/SkeletonLoader/ui/SkeletonLoader.tsx
@@ -233,27 +233,18 @@ export const SkeletonLoaderForNewsElementPage = ({ className = '' }: SkeletonLoa
 
             <div className={cls.newsElementSkeletonMeta}>
                 <div />
-                <div />
             </div>
 
             <div className={cls.newsElementSkeletonBody}>
+                <div />
+                <div />
+                <div />
                 <div />
                 <div />
                 <div />
                 <div />
                 <div className={cls.short} />
             </div>
-
-            <div className={cls.newsElementSkeletonShare} />
-        </div>
-    );
-};
-export const SkeletonLoaderForReadMoreTitle = () => {
-    return (
-        <div className={cls.readMoreSkeletonContainer}>
-            <div className={cls.readMoreSkeletonWrapper}>
-                <div className={cls.readMoreSkeletonTitle} />
-            </div>
         </div>
     );
 };

From 933641a210e8287ca7046e96af9d72f820a118b9 Mon Sep 17 00:00:00 2001
From: Liisa Davydov <liisamuttonen@gmail.com>
Date: Fri, 8 May 2026 10:02:35 +0300
Subject: [PATCH 6/6] Newspage card limit

Reverting value to original
---
 .../src/preparedPages/NewsPages/ui/NewsPage.tsx                | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
index 63ddca91d..1182de4e8 100644
--- a/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
+++ b/frontend-next-migration/src/preparedPages/NewsPages/ui/NewsPage.tsx
@@ -23,8 +23,7 @@ const NewsPage = () => {
     const currentSlug = typeof params.slug === 'string' ? params.slug : undefined;
     const lngCode = lng === 'en' ? 'en-US' : lng === 'fi' ? 'fi-FI' : lng;
     const directusBaseUrl = envHelper.directusHost;
-    //limit for initial load(no news data fetched yet)
-    const limit = 12;
+    const limit = 6;
     const [currentPage, setCurrentPage] = useState(1);
     const [allNews, setAllNews] = useState<News[]>([]);
     const [hasMoreNewsState, setHasMoreNewsState] = useState<boolean>(false);