patron-oop 1.45.0 → 1.46.0

package/docs/pages/guest/guest-disposable.html

@@ -0,0 +1,147 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestDisposable</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestDisposable.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  GuestDisposable на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для динамического создания
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-guest"
+    >
+      гостя
+    </a>
+  </span>
+  с функциональностью его удаления из
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/patron/patron-pool"
+    >
+      пула патронов
+    </a>
+  </span>
+  , на случай, если гость станет
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-patron"
+    >
+      патроном
+    </a>
+  </span>
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Полезно в случаях, когда гость сделал свою работу и должен быть удален из пула
+  патронов, но в случае если гость стал патрном. У класса Patron есть метод
+  disposed, который берется от гостя. В логике PatronPool после каждой передачи
+  значения патрону идет проверка не нужно ли удалить этот патрон из пула вызовом
+  метода disposed
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Вместо класса GuestDisposable можно использовать функцию
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/utils/remove-patron-from-pools"
+    >
+      removePatronFromPools
+    </a>
+  </span>
+  - для того чтобы удалить патрон из всех пулов. либо функцию
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/utils/is-patron-in-pools"
+    >
+      isPatronInPools
+    </a>
+  </span>
+  - проверяет есть ли патрон в каком-либо пуле
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre class="mb-4"><code class="language-js">import { SourceWithPool, Patron, GuestDisposable } from "patron-oop";
+
+  const source = new SourceWithPool("Один");
+
+  source.value(
+    new Patron(
+      new GuestDisposable(
+        (value) => {
+          document.querySelector(".guest-result").textContent = value;
+        },
+        (value) => {
+          return value !== "Один";
+        }
+      )
+    )
+  );
+
+  setTimeout(() => {
+    source.give("Два");
+  });
+
+  setTimeout(() => {
+    source.give("Три");
+  }, 100);
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Нет значения</span>
+</div>
+<script type="module">
+  import { SourceWithPool, Patron, GuestDisposable } from "patron-oop";
+
+  const source = new SourceWithPool("Один");
+
+  source.value(
+    new Patron(
+      new GuestDisposable(
+        (value) => {
+          document.querySelector(".guest-result").textContent = value;
+        },
+        (value) => {
+          return value !== "Один";
+        }
+      )
+    )
+  );
+
+  setTimeout(() => {
+    source.give("Два");
+  });
+
+  setTimeout(() => {
+    source.give("Три");
+  }, 100);
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/source"
+    >Source</a
+  >
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/patron"
+    >Patron</a
+  >
+</p>

package/docs/pages/guest/guest-executor-applied.html

@@ -0,0 +1,65 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestExecutorApplied</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestExecutorApplied.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  GuestExecutorApplied на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Иногда нам нужно контроллировать не значение, которое приходит гостю, а процесс передачи значения, например если мы хотим применить к гостю функцию debounce или функцию throttle, чтобы снизить количество срабатываний логики гостя.
+</p>
+
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4 w-full"
+><code class="language-js">import { Guest, GuestExecutorApplied, sourceOf } from "patron-oop";
+
+  const guest = new Guest((value) => {
+    document.querySelector(
+      ".guest-result"
+    ).textContent = `value is ${value}`;
+  });
+
+  sourceOf(40).value(
+    new GuestExecutorApplied(guest, (guestFn) => {
+      return v => {
+        setTimeout(() => {
+          guestFn(v);
+        }, 5000)
+      }
+    })
+  );
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Результат через 5 сек...</span>
+</div>
+<script type="module">
+  import { Guest, GuestExecutorApplied, sourceOf } from "patron-oop";
+
+  const guest = new Guest((value) => {
+    document.querySelector(
+      ".guest-result"
+    ).textContent = `value is ${value}`;
+  });
+
+  sourceOf(40).value(
+    new GuestExecutorApplied(guest, (guestFn) => {
+      return v => {
+        setTimeout(() => {
+          guestFn(v);
+        }, 5000)
+      }
+    })
+  );
+</script>

package/docs/pages/guest/guest-object.html

@@ -0,0 +1,101 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestObject</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestObject.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  GuestObject на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для перевода любого
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/visitor"
+    >
+      посетителя
+    </a>
+  </span>
+  в объектный вид, чтобы можно было вызывать .give метод
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Этот функционал может быть полезен, если нужно написать код в котором мы будем
+  уверены, что посетитель - это объект, вне зависимости будет это патрон или
+  гость
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Этот класс может быть заменен функцией give, которой неважно какой посетитель
+  к ней пришел функция,
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-guest"
+    >
+      гость
+    </a>
+  </span>
+  или
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-patron"
+    >
+      патрон
+    </a>
+  </span>
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { GuestObject } from 'patron-oop';
+
+class HelloWorld {
+    greeting(guest) {
+        new GuestObject(guest).give('Hello world!');
+    }
+}
+
+const fnGuest = (value) => {
+    document.querySelector('.guest-result').textContent = value;
+}
+new HelloWorld().greeting(fnGuest);
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Ждем результат</span>
+</div>
+<script type="module">
+  import { GuestObject } from "patron-oop";
+
+  class HelloWorld {
+    greeting(guest) {
+      new GuestObject(guest).give("Hello world!");
+    }
+  }
+
+  const fnGuest = (value) => {
+    document.querySelector(".guest-result").textContent = value;
+  };
+  new HelloWorld().greeting(fnGuest);
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/utils/give"
+    >give</a
+  >
+</p>

package/docs/pages/guest/guest-pool.html

@@ -0,0 +1,107 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestPool</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestPool.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  GuestPool на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для подписки на отложенное значение не только
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-patron"
+    >
+      патрона
+    </a>
+  </span>
+
+  но и
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/the-guest"
+    >
+      гостя
+    </a>
+  </span>
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Полезным это поведение может быть в случаях, когда значение заранее не
+  известно, но пришедший посетитель в случае если он гость не должен быть
+  проигнорирован, а должен получить первое установленное значение, после чего
+  все гости из пула удаляются, а все патроны остаются внутри PatronPool
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { GuestPool } from 'patron-oop';
+
+class ValueAfterDelay {
+    constructor(theValue, delay) {
+        this.theValue = theValue;
+        this.delay = delay;
+        this.pool = new GuestPool();
+    }
+
+    value(guest) {
+        this.pool.add(guest);
+        setTimeout(() => {
+            this.pool.give(this.theValue);
+        }, this.delay);
+    }
+}
+
+const fnGuest = (value) => {
+    document.querySelector('.guest-result').textContent = value;
+}
+new ValueAfterDelay(42, 5000).value(fnGuest);
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Ждем значение через 5 секунд...</span>
+</div>
+<script type="module">
+  import { GuestPool } from "patron-oop";
+
+  class ValueAfterDelay {
+    constructor(theValue, delay) {
+      this.theValue = theValue;
+      this.delay = delay;
+      this.pool = new GuestPool();
+    }
+
+    value(guest) {
+      this.pool.add(guest);
+      setTimeout(() => {
+        this.pool.give(this.theValue);
+      }, this.delay);
+    }
+  }
+
+  const fnGuest = (value) => {
+    document.querySelector(".guest-result").textContent = value;
+  };
+  new ValueAfterDelay(42, 5000).value(fnGuest);
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/patron/patron-pool"
+    >PatronPool</a
+  >
+</p>

package/docs/pages/guest/guest-sync.html

@@ -0,0 +1,66 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestSync</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestSync.ts"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  GuestSync на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для синхронного возвращения значения из объекта
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Полезно в случаях работы с синхронным(процедурным) кодом, когда нужно вынуть
+  значение из объекта и передать в виде чистых данных(nacked data). Использовать
+  этот класс часто не рекомендуется, наиболее вероятная область применения -
+  создание адаптеров с процедурным кодом
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Значение внутри <b>GuestSync</b> мутируется! Стоит быть аккуратным при
+  использовании и учитывать это
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4"
+><code class="language-js">import { SourceWithPool, GuestSync } from 'patron-oop';
+
+const source = new SourceWithPool('Успешно установлено синхронно!');
+const syncGuest = new GuestSync('');
+source.value(syncGuest);
+
+document.querySelector('.guest-result').textContent = syncGuest.value();
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Значение установится синхронно!</span>
+</div>
+<script type="module">
+  import { SourceWithPool, GuestSync } from "patron-oop";
+
+  const source = new SourceWithPool("Успешно установлено синхронно!");
+  const syncGuest = new GuestSync('');
+  source.value(syncGuest);
+
+  document.querySelector(".guest-result").textContent = syncGuest.value();
+</script>
+
+<div class="font-bold mt-8">Смотрите также</div>
+
+<p class="text-gray-600 text-lg mb-4 dynamic-navigation">
+  <a
+    class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+    href="/source"
+    >Source</a
+  >
+</p>

package/docs/pages/guest/index.html

@@ -0,0 +1,115 @@
+<h1 class="pb-3 text-xl font-semibold text-gray-600">Класс Guest</h1>
+
+<a
+  href="https://github.com/kosukhin/patron/blob/main/src/Guest/Guest.ts#L27"
+  target="_blank"
+  class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
+>
+  <img
+    src="./assets/img/github_16.jpg"
+    width="16"
+    height="16"
+  />
+  Guest на GitHub
+</a>
+
+<p class="text-gray-600 text-lg mb-4">
+  Предназначен для создания новых экземпляров
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      target="_blank"
+      href="https://github.com/kosukhin/patron/blob/main/src/Guest/Guest.ts#L12"
+    >
+      GuestObjectType
+    </a>
+  </span>
+  из функции-колбэка
+</p>
+
+<p class="text-gray-600 text-lg mb-4">
+  Это поведение полезно в случаях, когда нужно динамически построить
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      href="/terminology/visitor"
+    >
+      посетителя
+    </a>
+  </span>
+  на основе функции, используя какие-то переменные из скоупа, где создана
+  функция
+</p>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
+<pre
+  class="mb-4 w-full"
+><code class="language-js">import { Guest } from 'patron-oop';
+
+class Timestamp {
+    seconds(guest) {
+        guest.give(Date.now())
+    }
+}
+
+const timestamp = new Timestamp();
+timestamp.seconds(new Guest((timestamp) => {
+    console.log('timestamp is', timestamp);
+}));
+</code></pre>
+
+<p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
+<div class="example mb-4">
+  <span class="guest-result">Result here</span>
+</div>
+<script type="module">
+  import { Guest } from "patron-oop";
+
+  class Timestamp {
+    seconds(guest) {
+      guest.give(Date.now());
+    }
+  }
+
+  const timestamp = new Timestamp();
+  timestamp.seconds(
+    new Guest((timestamp) => {
+      document.querySelector(
+        ".guest-result"
+      ).textContent = `timestamp is ${timestamp}`;
+    })
+  );
+</script>
+
+<p class="text-gray-600 text-lg mb-4">
+  Возможность создавать объект-посетитель из функции была
+  единственной в первых версиях библиотеки. На текущий момент вы можете также
+  передать функцию-колбэк в качестве посетителя, тк функция соответствует типу
+  <span class="dynamic-navigation">
+    <a
+      class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
+      target="_blank"
+      href="https://github.com/kosukhin/patron/blob/main/src/Guest/Guest.ts#L17"
+    >
+      GuestType
+    </a>
+  </span>
+  Это позволяет не создавать лишних объектных-оберток
+</p>
+
+<p class="text-gray-600 text-lg font-bold mb-0">Пример 2.</p>
+<pre
+  class="mt-0 w-full"
+><code class="language-js">import { Guest } from 'patron-oop';
+
+class Timestamp {
+    seconds(guest) {
+        give(Date.now(), guest);
+    }
+}
+
+const timestamp = new Timestamp();
+timestamp.seconds((timestamp) => {
+    console.log('timestamp is', timestamp);
+});
+</code></pre>

package/docs/pages/guest.html

@@ -0,0 +1,59 @@
+<section class="text-gray-600 body-font">
+  <div class="py-1 flex flex-col w-full">
+    <div class="lg:w-4/6 mx-auto w-full">
+      <div class="flex flex-col sm:flex-row w-full">
+        <div class="sm:w-1/3 text-center">
+          <div
+            class="flex flex-col items-center text-center justify-center guest-menu"
+          >
+            <h2 class="font-medium title-font text-gray-900 text-lg">
+              <a href="/guest"> Guest </a>
+            </h2>
+            <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+            <ul class="text-gray-900">
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-object"> GuestObject </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-sync"> GuestSync </a>
+              </li>
+              <li class="w-full py-4">
+                <a href="/guest/guest-disposable"> GuestDisposable </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-cast"> GuestCast </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-pool"> GuestPool </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-applied"> GuestApplied </a>
+              </li>
+              <li class="w-full border-b-2 border-neutral-100 py-4">
+                <a href="/guest/guest-executor-applied"> GuestExecutorApplied </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="w-full sm:w-2/3 sm:pl-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 sm:mt-0"
+        >
+          <div class="guest-loader">
+            <div class="w-full flex justify-center">
+              <div
+                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                role="status"
+              >
+                <span
+                  class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+                  >Loading...</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="guest-page-area"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>