DEV Community: Gishan Chaminga Abeysinghe

How to show loading when changing pages in Nuxt3

Gishan Chaminga Abeysinghe — Mon, 22 Sep 2025 11:01:17 +0000

I am showing here how to make loading screen when changing pages, there should be asynchronous calls with await to make it show in this method.

export default defineNuxtPlugin((nuxtApp) => {
  const global = useGlobalLoading()

  nuxtApp.hook('page:start', () => {
    global.showLoading()
  });
  nuxtApp.hook('page:loading:end', () => {
    global.hideLoading()
  });
})

export function useGlobalLoading() {
  const isGlobalLoading = useState('global-loading', () => false)

  function showLoading() {
    isGlobalLoading.value = true
  }

  function hideLoading() {
    isGlobalLoading.value = false
  }

  return {
    isGlobalLoading,
    showLoading,
    hideLoading,
  }
}

In your app.vue

<script setup lang="ts">
import Loading from './components/Loading.vue'

const globalLoading = useGlobalLoading()
</script>

<template>
  <div class="h-screen w-full flex justify-center items-center relative">
    <div
      v-show="globalLoading.isGlobalLoading.value"
      class="h-full w-full flex justify-center items-center fixed bg-gray-400/50 z-[9999]"
    >
      <Loading />
    </div>
    <div class="h-full w-full">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </div>
</template>

Learning .NET

Gishan Chaminga Abeysinghe — Thu, 05 Dec 2024 16:50:42 +0000

Here are my learnings of .Net,

I got the chance to work in a C# project and I had to learn things from the beginning.

first I installed the .Net sdk, to check the version you can use following command in the terminal

dotnet --version

I used docker to install the sqlserver

docker run -e ACCEPT_EULA=Y -e SA_PASSWORD=YourStrong@Passw0rd -p 1433:1433 --name sql1 -d mcr.microsoft.com/mssql/server:2022-latest

then I had to migrate the database. for that we need a dotnet tool called dotnet-ef, we have to install it first

dotnet tool install --global dotnet-ef

you can get more idea about the dotnet-ef by using --help as follows

dotnet ef --help

to do the database migration

dotnet ef database update --project [project-name].Infrastructure --startup-project [project-name]
to run the project

dotnet run --project [project-name]

to run the project with launch profile you can use

dotnet run --project [project-name] --launch-profile https

there are three launch profiles

default
http
https

Haskell - part 1 - Introduction

Gishan Chaminga Abeysinghe — Wed, 29 Dec 2021 07:39:00 +0000

When I was doing my master's I learned an alienated programming language. subject name was functional programming. As I am a programming languages enthusiast I just chose the subject without knowing how its gonna be. though I heard its all about a language called Haskell I really didnt bother much to search about it.

So lets come to the Intro.

Haskell is a functional programming language. what? yeah all the other languages also have functions. whats new in here then.

So in haskell everything is a pure function.

okay. what is a pure function?

It always gives you the same output when you provide same input.
No side effects.

What are side effects then.

A side effects are when a function relies on, or modifies, something outside its parameters to do something.

I copied the definition. Anyways I can give you some examples. If you do an API call, IO operation, database calls or even console logs these thing are called as side effects.

So now you might get a doubt on how we can do those side effects.

Actually in Haskell there is a concept called "Monads" to handle it. In a coming blog i will explain how to write a monad. As it has a more learning curve.

This is just a small introduction. will meet the next blog soon. till then enjoy coding.

Cheers!!!

Configure more than one git accounts locally.

Gishan Chaminga Abeysinghe — Sat, 13 Nov 2021 08:06:02 +0000

After joining my first job they gave me a new mac mini, previously I used to work on my laptop but mac mini feels more convenient now. As you all know new company means you will get your new working email id. then you might need to use it create a new github account. (github is just for an example, this process valid for any git remote provider)

Then the real struggle starts. How to manage personal and work github accounts in the same machine.

First Step

Generate 2 ssh keys, means you have to have two public keys and two private keys in your .ssh folder
ex:- id_rsa_work id_rsa_personal id_rsa_work.pub id_rsa_personal.pub

ssh-keygen -t rsa

Second Step

copy public ssh keys, work ssh goes to work github and personal ssh goes to personal github. so now you have added your public keys respectively.

pbcopy < ~/.ssh/id_rsa_work.pub
pbcopy < ~/.ssh/id_rsa_personal.pub

Third Step

Now we have to create another file in .ssh folder called config and paste the code below

# Personal GitHub
Host personal
  HostName github.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa_personal

# Work GitHub
Host work
  HostName github.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa_work

Host *
  IdentitiesOnly yes

Fourth Step

Scenario 1 - Cloning a repo

Suppose you want to clone a repo from your working github account.

git clone git@github.com:work-account/project.git

you have to replace git@github.com with work. so it will look follows. actully work is the name you gave in the config file.

git clone work:work-account/project.git

Scenario 2 - New repo / Existing repo

git remote add origin git@github.com:work-account/project.git

change to

git remote add origin work:work-account/project.git

I hope this will make your life easier and happy version controlling.

cheers!!

How to convert an Ajax call to a Promise

Gishan Chaminga Abeysinghe — Thu, 11 Nov 2021 07:57:10 +0000

As you know $.ajax is the most famous way to do an ajax call to any api, but sometimes you might need to convert this callback based ajax call to promise based. Actually using this method you can convert any callback to a promise.

function ajaxPromise(data, url, type) {
   return new Promise(function (resolve, reject) {
        $.ajax({
          type,
          url,
          data,
          success: function (response) {
            resolve(response);
          },
          error: function (error) {
            reject(error);
          },
        });
    });
}

What are the real benefits of this method

Now you can use this inside an try catch block with async await.
You can call your ajax calls in a for loop.
Avoid callback hell.

try {
   for (let index = 0; index < ajaxCalls.length; index++) {
       const { url, data,type } = ajaxCalls[index];
       res = await ajaxPromise(data, url, type);
   }
} catch (error) {
    console.log(error);
}

I hope this article is useful for you.