Skip to content

New Content Management System (CMS) features briefly "flash" unformatted content when using Markdown #5338

@tdonohue

Description

@tdonohue

Describe the bug

This bug was discovered during testing of #5106.

If you modify the dspace.cms.home-header, dspace.cms.home-news or dspace.cms.footer fields with Markdown text (e.g. a list of items as shown below), then when the page reloads you will briefly see unformatted text followed by the nicely formatted Markdown text.

See also the examples/comments in #5106 (comment)

To Reproduce

Steps to reproduce the behavior:

  1. I'm running in production mode (npm run build:prod && npm run serve:ssr)
  2. Edit one of those fields (dspace.cms.home-header, dspace.cms.home-news or dspace.cms.footer) and add Markdown text. For example a list like this:
    _Three things:_
    * One
    * Two
    * Three
    
  3. Save changes and go back to the homepage.
  4. Click reload button in browser, and you'll see the unformatted text briefly, then the page reloads and you'll see the nicely formatted Markdown text.
    • This flash behavior sometimes causes things to jump around on the page if the formatted text suddenly takes up more space. For example, with a list of items (like the example above). You'll see that list will first appear all as one line of text, then the page flashes and it reloads and you'll see a formatted list.

Expected behavior

The Markdown content should either not appear until properly formatted, or appear immediately as formatted text. The latter (appearing properly formatted immediately) is preferred just because it will ensure that page content doesn't jump around.

Related work

Related to #5106

Metadata

Metadata

Assignees

No one assigned

    Labels

    DSpace-CRIS mergerThis ticket/PR relates to the merger of DSpace-CRIS into DSpace.bughelp wantedNeeds a volunteer to claim to move forwardhigh priority

    Type

    Projects

    Status

    📋 To Do

    Status

    📋 To Do

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions