Revision date doesn't work with Instant loading

I checked that…

• … the documentation does not mention anything about my problem
• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … there are no open or closed issues that are related to my problem

Description

When I set the instant feature along with the git-revision-date-localized plugin and click in any page from within the site, the XHR reload shows the new page fast, but the revision date won’t appear at the end. I can only see it by refresing the site. This bug doesn’t happen when I follow a link to the site; only when I navigate through pages from within the site (XHR reloads).

Expected behavior

Go to another page, displayed by XHR, and see the revision date at the end.

Actual behavior

Go to another page, displayed by XHR, and only see “Last update:”, without any date.

Steps to reproduce the bug

1. Enable instant and git-revision-date-localized:

   plugins:
   - search
   - git-revision-date-localized:
       type: timeago
       fallback_to_build_date: true
   

2. Go to any page of your site following an URL from the outside. Revision date shows.
3. Go to any page from within the site (sidebar, prev/next page buttons, etc). Revision date doesn’t show.
4. Refresh the site. Revision date shows again.

Package versions

• Python: 3.8.5
• MkDocs: 1.1.2
• Material: 5.5.12+insiders.1.4.1
  (although it also happened before using Insider builds)

Project configuration

# Appearance
theme:
  name: material
  custom_dir: theme
  logo: assets/img/logo.png
  favicon: assets/img/favicon.png
  font:
    text: PT Sans
    code: PT Mono
  palette:
    - scheme: slate
      primary: deep purple
      accent: deep purple
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
    - scheme: default
      primary: deep purple
      accent: deep purple
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode
  features:
    - instant
    - tabs
    - header.hide # Insiders
    - search.highlight # Insiders

# Plugins
plugins:
  - search
  - minify:
      minify_html: true
  - git-revision-date-localized:
      type: timeago
      fallback_to_build_date: true

# Extensions
markdown_extensions:
  - admonition
  - def_list
  - meta
  - pymdownx.details
  - pymdownx.emoji
  - pymdownx.extra
  - pymdownx.highlight
  - pymdownx.inlinehilite
  - pymdownx.keys:
      separator: ' + '
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.striphtml
  - pymdownx.superfences
  - pymdownx.tabbed
  - pymdownx.tasklist:
      custom_checkbox: true
  - toc:
      separator: "-"
      permalink: '#'
      toc_depth: 3

# Customization
extra_css:
  - assets/css/tasklist.css
  - assets/css/tabbed.css
  - assets/css/critic.css
  - assets/css/2t1.css
extra_javascript:
  - assets/js/details.js
  - assets/js/tables.js
  - assets/js/2t1.js
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js

System information

• OS: Windows 10 20H1
• Browser: Firefox 80.0.1

[timvink]

Sweet thanks for the help @squidfunk, and thanks for the detailed report @danierutu !

I just released mkdocs-git-revision-date-localized-plugin v0.7.1 which adds support for instant loading.

[squidfunk]

@timvink thanks for your input! It’s not hard to get it working with instant loading. The documentation describes how to integrate tablesort, an external library, with instant loading:

mkdocs.yml:

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
  - javascripts/tables.js

javascripts/tables.js:

app.document$.subscribe(function() {
  var tables = document.querySelectorAll("article table")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

As instant loading is a Material-specific feature, you’d have to detect Material. The app.document$ observable is exposed no matter if instant loading is enabled or not, and will run on the initial document load and on every document load triggered by instant loading, so maybe you could detect Material like this:

if (
  typeof app !== "undefined" && 
  typeof app.document$ !== "undefined"
) {
  app.document$.subscribe(function() {
    // custom logic
  })
}
...

Other than that, you may also use the generator meta tag to detect Material:

if (document.querySelector("meta[name=generator][content*=mkdocs-material]")) {
  // custom logic
}