Links in tools section to specific category do not work

[derberg]

I try https://www.asyncapi.com/tools#Documentation%20Generators

and I guess it do not take me to proper section because of page load delay

<div class="my-8" id="Documentation Generators"> is in place, so anchor is correct. Although best anchors are without spaces.

so yeah, might be cause by delay of loading the view, something to check and figure out

[aryanas159]

can i be assigned to this issue?

[aryanas159]

I think the issue is caused because the javascript is executing before the DOM is rendered, is setting a setTimeout a good fix for this issue?

[akshatnema]

Hey @aryanas159, you can work on this.

I think the issue is caused because the javascript is executing before the DOM is rendered, is setting a setTimeout a good fix for this issue?

Nope, you should use some better approach to solve this problem. Maybe useRouter and useEffect can help you to scroll down to that heading.

[aryanas159]

Hey @aryanas159, you can work on this.

I think the issue is caused because the javascript is executing before the DOM is rendered, is setting a setTimeout a good fix for this issue?

Nope, you should use some better approach to solve this problem. Maybe useRouter and useEffect can help you to scroll down to that heading. @akshatnema Thanks for assigning the issue to me. I have fixed it with useffect and userouter, but the useffect is executing before the DOM is rendered, if I add a delay of 1s it's working fine.

[akshatnema]

What if you can use scroll margin and set it to the heading on which it should render?

[aryanas159]

https://github.com/asyncapi/website/assets/114330931/80296334-aad8-4227-8f03-3d8755cba3cc

How does this look?

[akshatnema]

How does this look?

It's fine but it's better that we don't use setTimeout here and also, the scroll margin should be set accordingly, in order to get the heading on the initial render. Heading shouldn't get scrolled above as seen in the video.

[aryanas159]

The issue is that the loading state has a timeout of 1s set to it, so the component is rendered only after 1s, we have to match that delay for scrolling as well.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[sambhavgupta0705]

@aryanas159 any progress??

[nikhil-3112]

@derberg I am ready to fix this issue.

[aryanas159]

@sambhavgupta0705 My proposed solution wasn't working for the maintainers, I think @nikhil-3112 should give it a go.

[nikhil-3112]

@derberg Below are some Possible solutions-

Analyze Current Performance:

Use browser developer tools or online performance analysis tools to check the current loading speed of the page. Identify any performance bottlenecks that may be causing delays.

Optimize Images:

Check if there are any large images on the page that could be optimized for faster loading. Compress and resize them if necessary.

Minify CSS, JavaScript, and HTML:

Ensure that your CSS, JavaScript, and HTML files are minified to reduce their size and improve loading speed.

Enable Compression:

Make sure GZIP or Brotli compression is enabled on your server to compress files before transmitting them over the network.

Leverage Browser Caching:

Set appropriate caching headers for static assets to instruct the browser to cache them locally and reduce the need for repeated downloads.

Reduce HTTP Requests:

Combine and minimize CSS and JavaScript files to reduce the number of HTTP requests needed to load the page.

Load JavaScript Asynchronously:

If there are non-essential JavaScript files, consider loading them asynchronously using the async attribute to prevent them from blocking the page load.

Prioritize Above-the-Fold Content:

Ensure that critical CSS and JavaScript needed for rendering above-the-fold content are loaded and executed as early as possible.

Optimize Server Response Time:

Optimize server-side code and database queries to reduce response times and improve overall page loading speed.

Use Content Delivery Networks (CDNs):

Utilize a CDN to distribute static assets closer to users and reduce latency.

[nikhil-3112]

Solving this issue by Loading JavaScript asynchronously

[nikhil-3112]

Already JavaScript is loading asynchronously. Trying Optimize server response time.

[nikhil-3112]

I think the issue is solved

[sambhavgupta0705]

Nope it is not

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[JeelRajodiya]

Is this still relevant?

[sambhavgupta0705]

Yes

[sambhavgupta0705]

@JeelRajodiya if you want to then you can work on this one