From f25d8cef1face9ca913e78b091325df6f7cf1834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AE=D0=BB=D0=B8=D1=8F=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8B=D0=B3=D0=B8=D0=BD=D0=B0?= <julyvol@yahoo.com>
Date: Sat, 25 Apr 2026 23:42:28 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=20=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4?=
 =?UTF-8?q?=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/big-picture.js | 44 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/js/big-picture.js b/js/big-picture.js
index 49e6a2b..5064f1b 100644
--- a/js/big-picture.js
+++ b/js/big-picture.js
@@ -1,3 +1,5 @@
+const COMMENTS_PER_LOAD = 5;
+
 const bigPictureElement = document.querySelector('.big-picture');
 const bigPictureImg = bigPictureElement.querySelector('.big-picture__img img');
 const likesCount = bigPictureElement.querySelector('.likes-count');
@@ -9,6 +11,9 @@ const commentCountBlock = bigPictureElement.querySelector('.social__comment-coun
 const commentsLoader = bigPictureElement.querySelector('.comments-loader');
 const cancelButton = bigPictureElement.querySelector('.big-picture__cancel');
 
+let currentComments = [];
+let shownCommentsCount = 0;
+
 const createCommentElement = ({ avatar, name, message }) => {
   const commentItem = document.createElement('li');
   commentItem.classList.add('social__comment');
@@ -30,6 +35,28 @@ const createCommentElement = ({ avatar, name, message }) => {
   return commentItem;
 };
 
+const renderComments = () => {
+  const commentsToShow = currentComments.slice(shownCommentsCount, shownCommentsCount + COMMENTS_PER_LOAD);
+
+  commentsToShow.forEach((comment) => {
+    const commentElement = createCommentElement(comment);
+    socialComments.appendChild(commentElement);
+  });
+
+  shownCommentsCount += commentsToShow.length;
+  commentCount.textContent = shownCommentsCount;
+
+  if (shownCommentsCount >= currentComments.length) {
+    commentsLoader.classList.add('hidden');
+  } else {
+    commentsLoader.classList.remove('hidden');
+  }
+};
+
+const onCommentsLoaderClick = () => {
+  renderComments();
+};
+
 const openBigPicture = (pictureData) => {
   bigPictureElement.classList.remove('hidden');
   document.body.classList.add('modal-open');
@@ -40,18 +67,13 @@ const openBigPicture = (pictureData) => {
   socialCaption.textContent = pictureData.description;
 
   socialComments.innerHTML = '';
+  currentComments = pictureData.comments;
+  shownCommentsCount = 0;
 
-  const comments = pictureData.comments;
-  totalCommentCount.textContent = comments.length;
-  commentCount.textContent = Math.min(5, comments.length);
-
-  comments.forEach((comment) => {
-    const commentElement = createCommentElement(comment);
-    socialComments.appendChild(commentElement);
-  });
+  totalCommentCount.textContent = currentComments.length;
+  commentCountBlock.classList.remove('hidden');
 
-  commentCountBlock.classList.add('hidden');
-  commentsLoader.classList.add('hidden');
+  renderComments();
 };
 
 const closeBigPicture = () => {
@@ -64,6 +86,8 @@ const initBigPictureHandlers = () => {
     closeBigPicture();
   });
 
+  commentsLoader.addEventListener('click', onCommentsLoaderClick);
+
   document.addEventListener('keydown', (evt) => {
     if (evt.key === 'Escape' && !bigPictureElement.classList.contains('hidden')) {
       closeBigPicture();