Skip to content

[772] fix: prevent content flash when using case studies filtering #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VitalyyP merged 17 commits into from
Aug 17, 2025
Merged

[772] fix: prevent content flash when using case studies filtering #213

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9cca755
set loading and loaded classes to main content
VitalyyP Aug 7, 2025
33a5ae4
feat: implement breadcrumbs visibility control and prevent content flash
VitalyyP Aug 14, 2025
38fc583
use DOMContentLoaded instead load
VitalyyP Aug 14, 2025
64f7423
remove debuging console.log
VitalyyP Aug 14, 2025
4fbb879
Merge branch 'main' into 772-feature/prevent-content-flash
VitalyyP Aug 14, 2025
b9ad348
rename css classes
VitalyyP Aug 14, 2025
690b970
add noscripts
VitalyyP Aug 14, 2025
a39528d
Update layout.html to prevent content flash
VitalyyP Aug 14, 2025
139ec5e
format layout.html
VitalyyP Aug 14, 2025
e8bc450
fix stucture of layout
VitalyyP Aug 14, 2025
4e66676
fix
VitalyyP Aug 16, 2025
7bb6d8a
create revealLoaded
VitalyyP Aug 16, 2025
e8cc54c
feat: replace inline hidden→visible with centralized loading→loaded h…
VitalyyP Aug 16, 2025
34b4648
delete unnecessary comments from case-studies-page
VitalyyP Aug 16, 2025
1a59ad3
clean up index.js
VitalyyP Aug 16, 2025
4c7f379
Merge branch 'main' into 772-feature/prevent-content-flash
VitalyyP Aug 16, 2025
5fa6051
Merge branch 'main' into 772-feature/prevent-content-flash
VitalyyP Aug 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions website/modules/asset/ui/src/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,3 +177,15 @@
.breadcrumb-link:hover {
text-decoration: underline;
}

.hidden {
opacity: 0;
overflow: hidden;
visibility: hidden;
}
.visible {
opacity: 1;

overflow: visible;
visibility: visible;
}
1 change: 0 additions & 1 deletion website/modules/asset/ui/src/scss/_cases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
&_content {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 3rem;
}

Expand Down
17 changes: 16 additions & 1 deletion website/modules/case-studies-page/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
data-default-visible-tags="{{ data.defaultVisibleTagsCount }}"
>
<div class="cs_content">
<div class="page-main_content">{% area data.page, 'main' %}</div>
<div class="page-main_content hidden" id="page-main_content">
{% area data.page, 'main' %}
</div>

<div id="filter" class="filter-anchor"></div>

Expand Down Expand Up @@ -295,6 +297,19 @@ <h4 class="portfolio-title">{{ article.portfolioTitle }}</h4>
<script>
window.totalPages = {{ data.totalPages | json }};
</script>
<script>
const container = document.getElementById('page-main_content');

if (container) {
window.addEventListener('load', () => {
container.classList.remove('hidden');
container.classList.add('visible');
});


}

</script>
<script src="/js/modules/case-studies-page/infinite-scroll.js"></script>

{% endblock main %}
55 changes: 28 additions & 27 deletions website/views/fragments/fragments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,31 @@
<p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&F</p>
</footer>
{% endfragment %} {% fragment breadcrumbs() %} {% if data.page._url !=
data.home._url %}
<nav class="breadcrumb" aria-label="Breadcrumb navigation">
<ol class="breadcrumb-list">
{% for page in data.page._ancestors %}
<li class="breadcrumb-item">
<a href="{{ page._url }}" class="breadcrumb-link">
{% if page._url == data.home._url %} Home {% else %} {{ page.title }} {%
endif %}
</a>
</li>
{% endfor %} {% if data.piece %}
<li class="breadcrumb-item">
<a href="{{ data.page._url }}" class="breadcrumb-link">
{{ data.page.title }}
</a>
</li>
<li class="breadcrumb-item breadcrumb-item-current" aria-current="page">
<span>{{ data.piece.title }}</span>
</li>
{% else %}
<li class="breadcrumb-item breadcrumb-item-current" aria-current="page">
<span>{{ data.page.title }}</span>
</li>
{% endif %}
</ol>
</nav>
{% endif %} {% endfragment %}
data.home._url %}
<nav class="breadcrumb hidden" aria-label="Breadcrumb navigation">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<ol class="breadcrumb-list">
{% for page in data.page._ancestors %}
<li class="breadcrumb-item">
<a href="{{ page._url }}" class="breadcrumb-link">
{% if page._url == data.home._url %} Home {% else %} {{ page.title }} {%
endif %}
</a>
</li>
{% endfor %} {% if data.piece %}
<li class="breadcrumb-item">
<a href="{{ data.page._url }}" class="breadcrumb-link">
{{ data.page.title }}
</a>
</li>
<li class="breadcrumb-item breadcrumb-item-current" aria-current="page">
<span>{{ data.piece.title }}</span>
</li>
{% else %}
<li class="breadcrumb-item breadcrumb-item-current" aria-current="page">
<span>{{ data.page.title }}</span>
</li>
{% endif %}
</ol>
</nav>
{% endif %} {% endfragment %}

18 changes: 17 additions & 1 deletion website/views/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
{% endif %}
>
{% render fragments.breadcrumbs() %}
<div class="sf-container">
<div class="sf-container hidden">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
{% endblock %}

{% block main %}
Expand All @@ -45,6 +45,22 @@
</main>
{% render fragments.footer() %}
<script type="text/javascript"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
const breadcrumbs = document.querySelector('.breadcrumb');
const container = document.querySelector('.sf-container');
if (breadcrumbs) {
console.log('Script in breadcrumbs');
breadcrumbs.classList.remove('hidden');
breadcrumbs.classList.add('visible');
}
if (container) {
container.classList.remove('hidden');
container.classList.add('visible');
}
});
</script>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</div>
{# Close .bp-wrapper #}
{% endblock %}
Loading