Homepage project loading in tabs

[JessaWitzel]

Currently the homepage loads all of the tabs and all of projects on those tabs at once.

Make it so that the teams on a tab only load when you click on that tab or when you click directly to a link of that tab. "Make an AJAX endpoint to load projects by status."

[JessaWitzel]

Reminding myself that tabs.js is the place to be.

[chadwhitacre]

slack ftr

[chadwhitacre]

I think as part of this we should will happen to address at least some of the page performance characteristics from #4262:

---

Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.

First meaningful paint: 9689.3ms
First meaningful paint measures when the primary content of a page is visible.

• Target: 1,600ms

Perceptual Speed Index: 5186
Speed Index shows how quickly the contents of a page are visibly populated.

• Target: 1250

First Visual Change: 916ms

Last Visual Change: 14079ms

Estimated Input Latency: 1706ms
The score above is an estimate of how long Gratipay takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency.

• Target: 50ms

Time To Interactive: 14186.8ms
Time to Interactive identifies the time at which Gratipay appears to be ready enough to interact with.

• Target: 5,000ms

Critical Request Chains: 27
The Critical Request Chains below show you what resources are required for first render of this page.
Longest request chain (shorter is better): 3
Longest chain duration (shorter is better): 8296.49ms
Longest chain transfer size (smaller is better): 449.78KB

/ (gratipay.com)
|-- css/fonts.css (cloud.typography.com)
|-- 244520/1BA9B830F035F9E44.css (downloads.gratipay.com) - 4556.72ms, 800.64KB
|-- /gratipay.css (assets.gratipay.com) - 1110.17ms, 466.45KB
|-- /AAEAAAABc3MwMQAIAAAAAQAAAAIABgAOAAYAAAABABAAAQAAAAEAKAABAAgAAQA... () - 6743.56ms, 449.78KB
|-- /AAEAAAABc3MwMQAIAAAAAQAAAAIABgAOAAYAAAABABAAAQAAAAEAKAABAAgAAQA... () - 6794.16ms, 449.78KB
|-- School-Idol-Tomodachi/image (gratipay.com) - 4990.14ms, 452.32KB
|-- Timefounder/image (gratipay.com) - 5047.67ms, 451.41KB
|-- KnightTouchBar-2000/image (gratipay.com) - 5090.69ms, 451.35KB
|-- cagatay/image (gratipay.com) - 5105.57ms, 451.58KB
|-- roomify/image (gratipay.com) - 5140.21ms, 454.40KB
|-- fonts/icomoon.woff (assets.gratipay.com) - 5154.81ms, 454.29KB
|-- Screna/image (gratipay.com) - 5163.51ms, 457.72KB
|-- Zerodark-theme/image (gratipay.com) - 5226.16ms, 454.64KB
|-- Laravel-Mage2-Ecommerce/image (gratipay.com) - 5248.63ms, 452.58KB
|-- simple-redis-cache/image (gratipay.com) - 5275.46ms, 451.24KB
|-- simple-redis-store/image (gratipay.com) - 5289.77ms, 451.24KB
|-- 8AAQAAAAFzczAxAAgAAAABAAAAAgAGAA4ABgAAAAEAEAABAAAAAQAoAAEACAABAA... () - 6998.27ms, 449.78KB
|-- UAParser.js/image (gratipay.com) - 5341.00ms, 453.24KB
|-- The-Void-Linux-Distribution/image (gratipay.com) - 5376.20ms, 453.18KB
|-- /banner.jpg (assets.gratipay.com) - 5397.64ms, 493.92KB
|-- datatamers/image (gratipay.com) - 5412.02ms, 451.39KB
|-- atom-autocomplete-lua/image (gratipay.com) - 5435.16ms, 451.33KB
|-- Conductor/image (gratipay.com) - 5477.47ms, 453.06KB
|-- /tipr.min.js (assets.gratipay.com) - 7553.90ms, 450.58KB
|-- /bootstrap-dropdown.js (assets.gratipay.com) - 7644.22ms, 451.74KB
|-- /chosen.jquery.min.js (assets.gratipay.com) - 7859.21ms, 457.54KB
|-- /gratipay.js (assets.gratipay.com) - 7982.02ms, 463.90KB
|-- /jquery.min.js (assets.gratipay.com) - 8296.49ms, 487.34KB

Other:

2 resources delayed first paint by 703ms:

https://assets.gratipay.com/gratipay.css?etag=t7Tkt7Jp52vWje7Wgmm-Sg~~ (delayed first paint by 405ms)
https://cloud.typography.com/6540672/615104/css/fonts.css (delayed first paint by 298ms)

[JessaWitzel]

Do we want new projects to load as someone scrolls or do we want to have a button/link that says "see more projects"? How many projects do we want to initially load? 20 is my thought but Wayne just said "what if someone has a huge screen?"

[chadwhitacre]

Do we want new projects to load as someone scrolls or do we want to have a button/link that says "see more projects"?

To my mind that is out of scope here. I think to keep this manageable we should only move to AJAX, but still load all 200+ projects when you click on the "Approved" tab. Once that's done we could then tackle #3738 in a separate PR. Eh?

[JessaWitzel]

Yes, thank you. You are right. I'm trying to wrap my brain around all this stuff I don't understand and got side tracked.

[JessaWitzel]

• Make it so that only the Approved and Featured tab loads
• Correct Counts
• New query that loads a tab if you click on it (AJAX)
• Different query for the fourth tab? (AJAX)
• Tab loading if you go to a direct link of that tab, figure out.

[JessaWitzel]

• Create an endpoint that gives me the project data in json format
• Create AJAX callback that properly populates project data into a tab
• AJAX request to load the project data for the current tab
• AJAX request to load project data for tab you click

[rohitpaulk]

How about using tabs like we have on history pages? Each tab is actually a link to the other page, handled by the browser and not JS/AJAX. That looks like the quickest way to get this out, we can then improve and convert that to use AJAX calls.

[chadwhitacre]

wfm

[rohitpaulk]

How about using tabs like we have on history pages? Each tab is actually a link to the other page, handled by the browser and not JS/AJAX. That looks like the quickest way to get this out, we can then improve and convert that to use AJAX calls.

Done in #4470, ready for review.

[rohitpaulk]

Do we need AJAX support to consider this as closed? How about splitting that into a new ticket?

[mattbk]

Or rename this ticket to be about AJAX?

I don't think it's a requirement.

[chadwhitacre]

How about splitting that into a new ticket?

wfm