Paths

Table of Contentst

Differential D17500

[Cashtab] Lazy loading for agora
ClosedPublic
Actions

Authored by bytesofman on Thu, Jan 9, 15:04.

Details

Reviewers

emack

Group Reviewers

Restricted Project

Commits

rABC99e28f1ad460: [Cashtab] Lazy loading for agora

Summary

Depends on D17499

Getting to the point where the page is unusable, esp by a new user with no tokens cached.

There are many things we can do to improve this. The challenge is loading and still getting all the info so we have a useful searchable dataset.

Will iterate towards this. This at least stops chronik from throwing errors and gives us some adjustable params.

Ultimately we would like

Only render OrderBooks we can see
Load all OrderBook data in the background
Search enabled when all data has loaded, search quickl filters and renders only searched OrderBooks

This will take many steps though.

Test Plan

npm test, npm start and observe loading behavior. It's not practical to specifically test these functions since we would need 100s or 1000s of mocks. Current test confirm that we still ultimately load everything.

deployed at https://cashtab-local-dev.netlify.app/

Diff Detail

Repository

rABC Bitcoin ABC

Branch

lazy-loading-agora

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 31999
Build 63490: Build Diff	cashtab-tests
Build 63489: arc lint + arc unit

Event Timeline

bytesofman created this revision.Thu, Jan 9, 15:04

Herald added a reviewer: Restricted Project. · View Herald TranscriptThu, Jan 9, 15:04

bytesofman edited the test plan for this revision. (Show Details)Thu, Jan 9, 15:06

Harbormaster completed remote builds in B31998: Diff 52073.Thu, Jan 9, 15:10

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <Agora /> We can see a rendered offer ======
Error: Unable to find an element with the text: Cachet (CACHET). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-crNyjn ZdDAu"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      />
      <div
        class="sc-cpHetk iAVmVp"
      >
        <div
          class="sc-nrwXf hfUHmV"
        >
          <div
            class="sc-iBmynh kaZLhZ"
          >
            <img
              alt="cashtab"
              class="sc-fKGOjr hMUwFD"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-chAAoq IEKNo"
          >
            <div
              class="sc-ekulBa txcVO"
            >
              <select
                class="sc-ciodno kiewTe"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-gGCbJM czBmUI"
                  value="Agora Partial Alpha"
                >
                  Agora Partial Alpha
                </option>
                <option
                  class="sc-gGCbJM czBmUI"
                  value="Agora Partial Beta"
                >
                  Agora Partial Beta
                </option>
              </select>
              <div
                class="sc-dznXNo goxNXI"
              >
                <button
                  aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                  class="sc-cJSrbW kZNvLw"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN bSWkUh"
                  >
                    <input
                      checked=""
                      class="sc-gFaPwZ iPJMNd"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-dymIpo isbbFI"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD cpOMDW"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-dTLGrV fpLYfM"
              title="Wallet Info"
            >
              <div
                class="sc-lcpuFF gzavlp"
                title="Balance in XEC"
              >
                4,200.00
                 
                XEC
                 
              </div>
              <div
                class="sc-bqjOQT hkjSY"
                title="Balance in Local Currency"
              >
                $
                0.13
                 
                USD
              </div>
              <p
                class="sc-jkCMRl cVcqZz"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-ekkqgF dcpeyv"
          >
            <h2
              class="sc-hEsumM eLITmV"
            >
              Agora 
              <svg
                title="Meme Agora"
              />
            </h2>
            <div
              class="sc-jxGEyO ktqFXP"
              title="Active Offers"
            >
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      class="sc-gFaPwZ iPJMNd"
                      id="Toggle Active Offers"
                      name="Toggle Active Offers"
                      title="Toggle Active Offers"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="Toggle Active Offers"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Toggle Buy / Manage Listings
                </div>
              </div>
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      checked=""
                      class="sc-gFaPwZ iPJMNd"
                      id="Sort by TokenId"
                      name="Sort by TokenId"
                      title="Sort by TokenId"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="Sort by TokenId"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Sort by TokenID
                </div>
              </div>
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      class="sc-gFaPwZ iPJMNd"
                      disabled=""
                      id="Sort by Offer Count"
                      name="Sort by Offer Count"
                      title="Sort by Offer Count"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iNCMtF"
                      disabled=""
                      for="Sort by Offer Count"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Sort by Offer Count
                </div>
                <div
                  class="sc-jzJRlG eQTBdJ"
                  title="Loading OrderBook info..."
                >
                  <div />
                  <div />
                  <div />
                  <div />
                </div>
              </div>
              <div
                class="sc-gacfCG HshlA"
              >
                Token Offers
              </div>
              <div
                class="sc-dEfkYy jwLkcH"
              />
            </div>
          </div>
        </div>
        <div
          class="sc-eitiEO cAszZe"
        >
          <div
            class="sc-hycgNl wPHRd"
          >
            <img
              alt="cashtab"
              class="sc-fKGOjr hMUwFD"
              src="test-file-stub"
            />
          </div>
          <button
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Transactions
            </span>
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Send
            </span>
            <svg
              title="tx-sent"
            />
          </button>
          <button
            aria-label="Tokens"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Tokens
            </span>
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Receive
            </span>
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-bhlBdH cRTmzE"
            title="Show Other Screens"
          >
            <span
              class="sc-AnqlK imGMyF"
            />
            <div
              class="sc-keFjpB bQavEn"
              title="Other Screens"
            >
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Agora/__tests__/index.test.js:244:29)
====== CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer ======
Error: expect(element).not.toBeInTheDocument()

expected document not to contain element, found <div class="sc-jzJRlG eQTBdJ" title="Loading OrderBook info..."><div /><div /><div /><div /></div> instead

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <div
        class="sc-crNyjn ZdDAu"
      >
        <section
          aria-atomic="false"
          aria-label="Notifications Alt+T"
          aria-live="polite"
          aria-relevant="additions text"
          class="Toastify"
        />
        <div
          class="sc-cpHetk iAVmVp"
        >
          <div
            class="sc-nrwXf hfUHmV"
          >
            <div
              class="sc-iBmynh kaZLhZ"
            >
              <img
                alt="cashtab"
                class="sc-fKGOjr hMUwFD"
                src="test-file-stub"
              />
            </div>
            <div
              class="sc-chAAoq IEKNo"
            >
              <div
                class="sc-ekulBa txcVO"
              >
                <select
                  class="sc-ciodno kiewTe"
                  data-testid="wallet-select"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-gGCbJM czBmUI"
                    value="Agora Partial Alpha"
                  >
                    Agora Partial Alpha
                  </option>
                  <option
                    class="sc-gGCbJM czBmUI"
                    value="Agora Partial Beta"
                  >
                    Agora Partial Beta
                  </option>
                </select>
                <div
                  class="sc-dznXNo goxNXI"
                >
                  <button
                    aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                    class="sc-cJSrbW kZNvLw"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </button>
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN bSWkUh"
                    >
                      <input
                        checked=""
                        class="sc-gFaPwZ iPJMNd"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        title="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-cpmLhU iUeRKn"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-dymIpo isbbFI"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-bnXvFD cpOMDW"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-dTLGrV fpLYfM"
                title="Wallet Info"
              >
                <div
                  class="sc-lcpuFF gzavlp"
                  title="Balance in XEC"
                >
                  4,200.00
                   
                  XEC
                   
                </div>
                <div
                  class="sc-bqjOQT hkjSY"
                  title="Balance in Local Currency"
                >
                  $
                  0.13
                   
                  USD
                </div>
                <p
                  class="sc-jkCMRl cVcqZz"
                  title="Price in Local Currency"
                >
                  1 
                  XEC
                   = 
                  0.00003000
                   
                  USD
                </p>
              </div>
            </div>
            <div
              class="sc-ekkqgF dcpeyv"
            >
              <h2
                class="sc-hEsumM eLITmV"
              >
                Agora 
                <svg
                  title="Meme Agora"
                />
              </h2>
              <div
                class="sc-jxGEyO ktqFXP"
                title="Active Offers"
              >
                <div
                  class="sc-fQejPQ kELCPK"
                >
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN iogvmX"
                    >
                      <input
                        class="sc-gFaPwZ iPJMNd"
                        id="Toggle Active Offers"
                        name="Toggle Active Offers"
                        title="Toggle Active Offers"
                        type="checkbox"
                      />
                      <label
                        class=...
    at toBeInTheDocument (/work/cashtab/src/components/Agora/__tests__/index.test.js:463:23)
    at runWithExpensiveErrorDiagnosticsDisabled (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:47:12)
    at checkCallback (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:124:77)
    at checkRealTimersCallback (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:118:16)
    at Timeout.task [as _onTimeout] (/work/cashtab/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
    at listOnTimeout (node:internal/timers:581:17)
    at processTimers (node:internal/timers:519:7)
====== CashTab Unit Tests: <Agora /> We get expected error if we try to buy an offer we cannot afford ======
Error: Unable to find an element with the text: Cachet (CACHET). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-crNyjn ZdDAu"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      />
      <div
        class="sc-cpHetk iAVmVp"
      >
        <div
          class="sc-nrwXf hfUHmV"
        >
          <div
            class="sc-iBmynh kaZLhZ"
          >
            <img
              alt="cashtab"
              class="sc-fKGOjr hMUwFD"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-chAAoq IEKNo"
          >
            <div
              class="sc-ekulBa txcVO"
            >
              <select
                class="sc-ciodno kiewTe"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-gGCbJM czBmUI"
                  value="Agora Partial Alpha"
                >
                  Agora Partial Alpha
                </option>
                <option
                  class="sc-gGCbJM czBmUI"
                  value="Agora Partial Beta"
                >
                  Agora Partial Beta
                </option>
              </select>
              <div
                class="sc-dznXNo goxNXI"
              >
                <button
                  aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                  class="sc-cJSrbW kZNvLw"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN bSWkUh"
                  >
                    <input
                      checked=""
                      class="sc-gFaPwZ iPJMNd"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-dymIpo isbbFI"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD cpOMDW"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-dTLGrV fpLYfM"
              title="Wallet Info"
            >
              <div
                class="sc-lcpuFF gzavlp"
                title="Balance in XEC"
              >
                0.00
                 
                XEC
                 
              </div>
              <div
                class="sc-bqjOQT hkjSY"
                title="Balance in Local Currency"
              >
                $
                0.00
                 
                USD
              </div>
              <p
                class="sc-jkCMRl cVcqZz"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-ekkqgF dcpeyv"
          >
            <h2
              class="sc-hEsumM eLITmV"
            >
              Agora 
              <svg
                title="Meme Agora"
              />
            </h2>
            <div
              class="sc-jxGEyO ktqFXP"
              title="Active Offers"
            >
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      class="sc-gFaPwZ iPJMNd"
                      id="Toggle Active Offers"
                      name="Toggle Active Offers"
                      title="Toggle Active Offers"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="Toggle Active Offers"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Toggle Buy / Manage Listings
                </div>
              </div>
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      checked=""
                      class="sc-gFaPwZ iPJMNd"
                      id="Sort by TokenId"
                      name="Sort by TokenId"
                      title="Sort by TokenId"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="Sort by TokenId"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Sort by TokenID
                </div>
              </div>
              <div
                class="sc-fQejPQ kELCPK"
              >
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN iogvmX"
                  >
                    <input
                      class="sc-gFaPwZ iPJMNd"
                      disabled=""
                      id="Sort by Offer Count"
                      name="Sort by Offer Count"
                      title="Sort by Offer Count"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iNCMtF"
                      disabled=""
                      for="Sort by Offer Count"
                    >
                      <span
                        class="sc-dymIpo kNGdId"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD bEXILN"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-jqCOkK sCOdD"
                >
                  Sort by Offer Count
                </div>
                <div
                  class="sc-jzJRlG eQTBdJ"
                  title="Loading OrderBook info..."
                >
                  <div />
                  <div />
                  <div />
                  <div />
                </div>
              </div>
              <div
                class="sc-gacfCG HshlA"
              >
                Token Offers
              </div>
              <div
                class="sc-dEfkYy jwLkcH"
              />
            </div>
          </div>
        </div>
        <div
          class="sc-eitiEO cAszZe"
        >
          <div
            class="sc-hycgNl wPHRd"
          >
            <img
              alt="cashtab"
              class="sc-fKGOjr hMUwFD"
              src="test-file-stub"
            />
          </div>
          <button
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Transactions
            </span>
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Send
            </span>
            <svg
              title="tx-sent"
            />
          </button>
          <button
            aria-label="Tokens"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Tokens
            </span>
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-jWojfa ksBUtE"
          >
            <span>
              Receive
            </span>
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-bhlBdH cRTmzE"
            title="Show Other Screens"
          >
            <span
              class="sc-AnqlK imGMyF"
            />
            <div
              class="sc-keFjpB bQavEn"
              title="Other Screens"
            >
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-kVrTmx aohUQ"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Agora/__tests__/index.test.js:774:29)

Each failure log is accessible here:
CashTab Unit Tests: <Agora /> We can see a rendered offer
CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer
CashTab Unit Tests: <Agora /> We get expected error if we try to buy an offer we cannot afford

Update timeout in some tests, make sure loaded count is never higher than the number of offers

Harbormaster completed remote builds in B31999: Diff 52074.Thu, Jan 9, 15:23

bytesofman published this revision for review.Thu, Jan 9, 16:00

bytesofman added inline comments.

cashtab/src/components/Agora/index.tsx
58 ↗	(On Diff #52073)	these are pretty agressive params this isn't really an optimization diff so much as a "keep it from breaking" diff

Fabien added a subscriber: Fabien.Thu, Jan 9, 20:16

Fabien added inline comments.

cashtab/src/components/Agora/index.tsx
40	I don't understand what you're doing here, can you explain ? To me it looks like the result should be batchCount = requestLimit + 1 (why the +1?) except that you can get divisions by zero in the middle thanks to math.floor (also requests = 0 but I assume it's not possible).

bytesofman added inline comments.Thu, Jan 9, 20:27

cashtab/src/components/Agora/index.tsx
40	hm yeah this isn't great logic. I want to know the number of batches (chunks). So, if we have 200 requests, and the batchSize is 50, then we have 4 batches of 50. If the batchSize is 60, we still have 4 batches -- 200 / 60 = 3.33333; `Math.floor(200 /60) + 1` = 4 also good point, should assert that request is not zero.

bail out if no promises to handle

also added some debug logging to the test site so you can see the counts going up

Harbormaster completed remote builds in B32016: Diff 52092.Thu, Jan 9, 22:45

emack requested changes to this revision.Fri, Jan 10, 03:18

emack added a subscriber: emack.

emack added inline comments.

cashtab/src/components/Agora/index.tsx
56 ↗	(On Diff #52092)	Should there be a `clearTimeout()` once this intervalMs has lapsed? Mainly because this is inside a loop and the risk is the next iteration gets to here and gets confused between multiple timeouts.

This revision now requires changes to proceed.Fri, Jan 10, 03:18

bytesofman requested review of this revision.Fri, Jan 10, 03:32

bytesofman marked an inline comment as done.

bytesofman added inline comments.

cashtab/src/components/Agora/index.tsx
56 ↗	(On Diff #52092)	in this case, it's just a standard one-liner for "wait" in JS. it's not like setInterval where it keeps repeating unless it's stopped. we expect to wait every iteration. JS garbage collection handles scenarios like the user leaving the page mid wait.

I also did a manual test of cashtab-local-dev vs prod, on new wallets, and this diff loads slightly faster than prod, but are still taking over 2 minutes. Is that the expected behavior?

In D17500#398205, @emack wrote:

I also did a manual test of cashtab-local-dev vs prod, on new wallets, and this diff loads slightly faster than prod, but are still taking over 2 minutes. Is that the expected behavior?

Yes

This diff doesn't really speed anything up. I set the paramaters quite high, trying to back off to below where chronik was failing.

might tweak the params in a future diff. but imo the fastest "fix" is to get a prelim whitelist up. Now that we have some clear tokens that people are looking for, we could prob pick like 5 tokens to load on this page by default, then have a button to "load all" with a warning about how long it will take.

Then we can work on search, true lazy loading, etc.