Какой самый простой способ добавить индикаторы загрузки между страницами во встроенном приложении в админке Shopify?

Question

Я использую Shopify App Bridge, чтобы встроить свое приложение в админку Shopify с панелью навигации App Bridge. Я потратил несколько дней, пытаясь понять, как добавить индикатор загрузки между страницами, поскольку он загружается в данный момент, но предыдущая страница все еще существует до тех пор, пока следующая страница не будет готова к отображению, и нет индикации загрузки. Есть ли простое решение для этого, поскольку я плохо разбираюсь в javascript и имею работающее приложение, использующее флягу и python, но не могу понять, что мне нужно добавить в мои шаблоны html, чтобы заставить его работать.

Я пробовал документы Shopify, в частности - https://shopify.dev/tools/app-bridge/actions/loading

Я добавил в заголовок html-шаблонов следующее:

      <script src="https://unpkg.com/@shopify/app-bridge@1.10.1/umd/index.js"></script>

и в теле html-шаблонов:

      <script type="text/javascript">
import createApp from '@shopify/app-bridge';
import {Loading} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const loading = Loading.create(app);
</script>

Я добавил свои базовые домены apiKey и shopOrigin непосредственно для тестирования, но я не уверен, что это то, что мне нужно сделать, и если да, то что еще мне нужно добавить для загрузки.

Кажется, мне может понадобиться добавить это, но я не знаю, где и что мне нужно делать, когда начинается загрузка.

      loading.subscribe(Loading.Action.START, () => {
  // Do something when loading starts
});

Любая помощь или указатели будут очень благодарны, спасибо.

Answer 1

У Shopify есть две ключевые вещи. Я не использую ни один из них, и никого не волнует, и на самом деле, это не имеет значения, но если вы хотите быть перфекционистом, порядок действий может быть таким:

Вы подготавливаете для себя их скелетные компоненты, которые можете сразу загрузить, и таким образом обманываете пользователя, что уже сейчас представляете контент. Во-вторых, после рендеринга поддельного скелета вы запускаете компонент загрузки, и он просто уходит. Как только вы действительно получите свой контент, вы перезаписываете Skeleton и завершаете загрузку.

Все очень просто. Все это подключи и молись с Polaris. Если вы не используете Polaris, вы можете сами изобретать то, что вам подходит. App Bridge - это всего лишь мост для безопасной связи, а не поставщик UI/UX. Так что не рассчитывайте на интерактивность, кроме самой основы.