Как отобразить индикатор загрузки для определенных секций?

Question

[0x80070005]

Имеется статический json на клиенте
data.json:

[
   {
      “id”: “settings”,
      “name”: “Настройки”,
      “items”: [
         {“id”: “game”, “name”: “Включить игру”},
         {“id”: “retest”, “name”: “Перезагрузить“}
      ]
   },
   {
      “id”: “list”,
      “name”: “Список”,
      “items”: “server”
   }
]

Также у меня имеется rest api для получения списка list site.ru/api/list

Мой вопрос такой. Как мне отобразить статические данные этого json и items, но для тех items которые от сервера грузятся, нужно отобразить индикатор загрузки?

Пример работы:

<ul>
   <span>Настройки</span>
   <li>Включить игру</li>
   <li>Перезагрузить</li>
</ul>
<ul>
   <span>Список</span>
   // Отображаем индикатор загрузки… а после показываем все li 
</ul>

Comments

[szQocks]

c такими ковычками, никак

[0x80070005]

szQocks, шутки за млн оставь при себе. Я код с iOS писал

[szQocks]

0x80070005, зачем тебе этот файл json на клиенте, напиши тупо в коде массив с данными и пользуйся, в чём проблема ?

[szQocks]

0x80070005, боишься что размер будет большой и так далее ? тогда выгружай данные с сервера частями или перепиши их так что бы размер файла с этими данными был маленьким

Answer 1

[Gumus171991]

Можно убрать из data.json второй элемент массива(который отвечает за данные с сервера) и поместить его в код компонента в хук useState. При этом стоит установить значения для поля items, как undefined(т.к. данные пока не подгружены).

const [list, setList] = useState({
id: 'list',
name: 'Список',
items: undefined,
});

В возвращаемой разметке можем сделать условие, в котором будем проверять значение поля list.items и если его значение будет оличаться от undefined, то отображаем, иначе показываем лоадер.
Пример кода:

const ListComponent = () => {
  const [list, setList] = useState({
  id: 'list',
  name: 'Список',
  items: undefined,
  });

  useEffect(() => {
  // Код для подгрузки необходимых данных...
  }, []);

  return ( 
    <ul>
       <span>Настройки</span>
       <li>Включить игру</li>
       <li>Перезагрузить</li>
    </ul>
    <ul>
     <span>Список</span>
       {list.items ? (// Необходимая разметка) : <p>Загрузка...</p>}
     </ul>
  )
}