I’m fairly new to Obsidian but digging into every aspect of it since a few weeks and love it so far. Being a perfectionist, there is still one thing that is giving me headaches since a few days of research.
It all start from this long code (I removed most of the tasks to complete but the issue is the same) for my daily tracking habit that have the sole purpose of counting my habits completion and giving me a green light when there’re checked/done. Important fact, I’m always viewing all my notes in Live Preview mode (1.because I always input text in them, 2. because it get rid of the ugly codes).
<!-- directives:[] -->
<div id="content"><pre><code class="dataviewjs language-dataviewjs">let totalChecks =
(dv.current().Gym ? 1 : 0) +
(dv.current().Anki ? 1 : 0);
let totalItems = 2; // Update totalItems to reflect the number of tasks being checked
// Define your colors for green and red
let greenColor = ""; // Replace with your desired green color
let redColor = ""; // Replace with your desired red color
// Check if all tasks are completed
let allTasksCompleted = (totalChecks = totalItems);
// Set the border and number color based on task completion
let color = allTasksCompleted ? greenColor : redColor;
// Apply a fine green or red border with rounded edges
let borderStyle = `border: 1px solid ${color}; padding: 2px 5px; display: inline-block; border-radius: 10px;`;
// Set the icon based on task completion
let icon = allTasksCompleted ? "🎉" : "🎯";
// Apply normal text style without bold or text effects
let textStyle = `color:${color};`;
// Render the block with a fine contour
dv.paragraph(`<div style="${borderStyle}">${icon} Progression: <span style="${textStyle}">${totalChecks}</span> sur ${totalItems}</div>`);</code></pre></div>
The Dataviewjs works perfectly but for some reason every time I open the note it blinks/flash for like a 1/4 of a second with the plain/raw code not being “rendered” and then after that very brief moment display me beautiful code result. I guess it’s due to Obsidian first loading and reading the whole note with code first before rendering it.
So with our little friend GPT I found a script that beautifully just remove all this delay.
So here is the script in each template note to be put just below properties:
<script src="hide-dataview-loading.js"></script>
and the .js in my vault that actually do the whole work:
// hide-dataview-loading.js
function hideDataviewLoading() {
// Your logic to hide the loading indicators or any other functionality
const loadingElements = document.querySelectorAll('.loading-indicator'); // Adjust this selector based on your needs
loadingElements.forEach(element => {
element.style.display = 'none'; // Example action to hide loading elements
});
// Additional logic if needed
}
// Export the function
module.exports = hideDataviewLoading;
and now bingo only the final result show from the very beginning of the note opening. Great, but wait, now I have another issue…this ugly 1 line script is at the top of every daily note… And that’s where it’s getting tough. I’ve tried through snippets, or being a bite creative and putting within a comment %% to hide it…nothing worked (I still got the = always displayed…)
I’m thinking maybe there is a way through Templater user’s script (that I don’t fully understand the use frankly) feature also to make this .js works across all notes at once without putting any script line in the notes??? I’m out of ideas, and of course, technicity here. Maybe there’s just a special technique to hide any script line within a note (or a plugin that does that). Or even better, an improvement of my big Dataviewjs to automatically bring the final code display just like the script does ? Again this only apply for the Live Preview mode (as I know it goes away easily in Preview mode).
I’m not sure I understand completely, but you can transclude bits of code saved elsewhere, which for me sometimes makes the transition a bit smoother when loading.
You could save your dataviewjs script (WITHOUT ```dataviewjs and ``` around it)
in some location in your vault, e.g. Scripts/dv/my-script.md
I did put the my-script file in my Vault without the ```Dataview as advised
And the other way worked perfectly in preview mode but just rendered a simple " - " without the " in Live Preview (the one mode I’m looking for), AND also still appears the 1 line code flashing like before.
I understand that my flashing was a bit hard to grasp so I’ve made a little video that speak for itself. As you can see the note loads, the code very briefly shows in a flash and then loads fine in the end. All that happens very quickly but is kind of disturbing.
Video here: DataviewJS flashing issue
I actually found myself (but still have an issue as you’ll see) where the issue was coming from and it was so silly: by default, when opening a note in Live Preview, Obsidian puts the cursor position at the very beginning of the note content (not the properties) and so if there is a code it will put the cursor at the beginning of it and won’t render and display the raw code (or like with the header, it will show the ## before the header…) AND I had the plugin cursor-goaway that was removing the cursor position right after, so that’s why I could see for a flash moment the code before it goes away…
So the solution for me would be to leave a blank space line before my actual dataviewjs so the cursor jump naturally on a blank line and now it’s all fine.
But is there any way to block the raw code display where the cursor goes automatically when opening a note (a bit like Preview mode)? Or having a plugin /snippet hat will make the cursor go away from the very opening of the note, and not after a flashing delay like the plugin cursor-goaway? Or even being able to pinpoint precisely where I want the cursor to be at each note.
Dataview fires the code in Live Preview and Reading Mode.
If the cursor is within the dataview(js) block, it is taken as being edited, so it won’t fire.
I use the Force Note View Mode plugin to force source view on on files and folders where there are 15-20 dataviewjs queries which I put on some canvas cards. I don’t want these queries to fire – I enter these notes to make changes or additions.
For various dashboard files (I can even use regex in the settings to catch these) with queries in them, I use obsidianUIMode: preview, that is Reading Mode setting, because I rarely edit these files: they only contain queries and a button that fires a template.
There may be other ways to use, but I want to keep this nice and short now.
Thank for the various tips!
I also tried using Force Note but having to always type Command-E to switch modes when I want to type some text is a bit cumbersome (I know for some it’s just a shortcut but I would prefer avoiding any other manipulations when I’m inside a mode). And furthermore, Force Note has the very same issue, which is that it first opens a note with a previous mode and then after operates the switch. Even by reducing the debounce settings at 0 you’ll notice the switch on notes opening^^.
So I guess I’ll try to add space line at the top, that seems to be the best solution for my case now.
